LayerwiseLayerwise
  • Features
  • Pricing
  • Templates
  • Docs
DownloadDownload
FeaturesPricingTemplatesDocsAI Website BuilderVibe CodingPersonal Software
DownloadDownload
  1. Glossary
  2. /
  3. Vibe coding & AI

Rules file

Also called AGENTS.md, CLAUDE.md, or project rules

A file in your project, such as AGENTS.md or CLAUDE.md, with standing instructions that an AI coding agent reads at the start of every task.

# AGENTS.md

## Stack
- Next.js App Router, TypeScript, Tailwind CSS.
- Run the app with `npm run dev`. Test with `npm test`.

## Rules
- Style with Tailwind classes. Never use inline styles.
- Put shared UI in `components/` and name files in kebab-case.
- Ask before adding a new dependency.
Create an AGENTS.md for this project with the stack, the commands to run, test, and build it, and the folder structure. Add these rules: use Tailwind classes instead of inline styles, ask before adding a dependency, and never edit generated migration files by hand.

Paste into Layerwise or any AI coding tool.

What is Rules file?

A rules file holds the instructions you would otherwise repeat in every prompt: the stack, how to run and test the app, naming and style conventions, and things to never do. Coding agents load it automatically, so every conversation starts from the same ground rules.

Tools look for different files. AGENTS.md is an open format that many agents read, including Codex, while Claude Code reads CLAUDE.md, and some editors keep rules in their own folder. Many tools also read a personal rules file in your home folder that applies to every project.

Keep it short and concrete. "Use Tailwind classes, never inline styles" works better than "write clean code." The file takes up room in the context window on every request, so cut rules the AI already follows and add one when you catch it repeating a mistake.

Related terms

All terms

Context window

The amount of text an AI model can consider at once, including your messages, its replies, and the files it reads, measured in tokens.

Prompt

The instruction you give an AI model. In AI coding tools, the prompt describes what to build or change, and its detail shapes the result.

AI agent

An AI model that works toward a goal on its own by planning, using tools, checking the results, and repeating until the task is done.

MCP

The Model Context Protocol: an open standard that connects AI apps to outside tools and data, such as files, databases, and design apps.

Build it with Layerwise

Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.

DownloadDownloadRead the docs
LayerwiseLayerwise

Build full-stack web apps in minutes with AI.

Product

  • Features
  • Pricing
  • Download
  • Templates

Solutions

  • AI Website Builder
  • Vibe Coding
  • Personal Software

Resources

  • Documentation
  • Changelog
  • Blog
  • Vibe Coding Glossary
  • llms.txt
  • llms-full.txt

Company

  • About
  • Contact

Legal

  • Privacy
  • Analytics Privacy
  • Terms
  • Security
  • Abuse

© 2026 Layerwise. All rights reserved.

Entrances & exits

  • Fade in
  • Slide in
  • Scale in
  • Pop in
  • Blur in
  • Reveal animation
  • Enter and exit animations

Timing & sequencing

  • Duration
  • Delay
  • Keyframes
  • Tweening
  • Stagger
  • Orchestration
  • Fill mode
  • Stepped animation
  • Looping animation
  • Yoyo animation

Easing

  • Easing
  • Linear easing
  • Ease-in
  • Ease-out
  • Ease-in-out
  • Cubic-bezier
  • Asymmetric easing
  • Overshoot easing

Springs & physics

  • Spring animation
  • Stiffness
  • Damping
  • Mass
  • Bounce
  • Velocity
  • Momentum
  • Interruptible animation
  • Rubber-banding

Transforms

  • Translate
  • Scale
  • Rotate
  • Skew
  • 3D flip
  • Perspective
  • Transform origin
  • Origin-aware animation

State transitions

  • Crossfade
  • Morph
  • Shared element transition
  • Layout animation
  • Height auto animation
  • Direction-aware transition
  • Continuity transition
  • Page transition
  • View Transitions API

Scroll effects

  • Scroll reveal
  • Scroll-driven animation
  • Parallax scrolling
  • Scrollytelling
  • Scroll pinning
  • Horizontal scroll section
  • Scroll progress bar
  • Scroll snap
  • Smooth scrolling

Interaction feedback

  • Hover effect
  • Press feedback
  • Ripple effect
  • Shake animation
  • Hold to confirm
  • Drag gesture
  • Drag to reorder
  • Swipe to dismiss
  • Pull to refresh
  • Magnetic button
  • Custom cursor
  • 3D tilt card
  • Spotlight card

Text effects

  • Typewriter effect
  • Text scramble
  • Split text animation
  • Text morph
  • Rotating words
  • Gradient text
  • Shimmer text
  • Number ticker
  • Tabular numbers
  • Underline animation

Loops & ambient motion

  • Marquee
  • Pulse animation
  • Float animation
  • Orbit animation
  • Idle animation
  • Particle background
  • Border beam
  • Confetti
  • Animated gradient

Visual effects

  • Blur
  • Clip-path
  • Mask
  • Before/after slider
  • SVG line drawing
  • Lottie animation

Motion principles

  • Purposeful animation
  • Anticipation
  • Follow-through
  • Squash and stretch
  • Perceived performance
  • Frequency of use
  • Spatial consistency
  • Reduced motion

Animation performance

  • Frame rate (FPS)
  • Jank
  • GPU acceleration
  • will-change
  • Layout thrashing

Layout

  • Hero section
  • Above the fold
  • Sticky header
  • Sidebar
  • Bento grid
  • Card
  • Flexbox
  • CSS Grid
  • Padding vs margin
  • Responsive design
  • Container
  • Masonry layout
  • Split screen
  • Z-index
  • Overflow

Components

  • Button variants
  • Modal
  • Drawer
  • Popover
  • Tooltip
  • Dropdown menu
  • Context menu
  • Toast notification
  • Tabs
  • Segmented control
  • Accordion
  • Carousel
  • Command palette
  • Combobox
  • Toggle switch
  • Checkbox
  • Radio button
  • Date picker
  • Breadcrumb
  • Pagination
  • Infinite scroll
  • Badge
  • Avatar stack
  • Empty state
  • Skeleton screen
  • Spinner
  • Progress bar
  • Data table
  • Stepper
  • Floating label
  • Inline validation
  • Alert banner
  • Tag input

States & patterns

  • Interaction states
  • Focus ring
  • Loading state
  • Optimistic UI
  • Debounce
  • Lazy loading
  • Dark mode
  • Micro-interaction
  • Affordance
  • Undo
  • Drag and drop
  • Keyboard shortcut

Visual styles

  • Glassmorphism
  • Liquid glass
  • Neumorphism
  • Claymorphism
  • Neo-brutalism
  • Skeuomorphism
  • Flat design
  • Mesh gradient
  • Aurora background
  • Grain texture
  • Glow effect
  • Drop shadow
  • Border radius
  • Grid background
  • Typographic hierarchy
  • Accent color
  • Color contrast

Vibe coding & AI

  • Vibe coding
  • Prompt
  • Context window
  • Token
  • AI agent
  • Tool call
  • Hallucination
  • Diff
  • Live preview
  • Checkpoint
  • Git commit
  • Deploy
  • Frontend and backend
  • API
  • Database
  • Rules file
  • MCP
  • Plan mode
  • Visual edit
AGENTS.md

# Rules

- Use Tailwind classes

- Never use inline styles

Not in this project

Add a Save button
SaveButton.tsx
<button
>Save</button>

No rule, so the AI picked inline styles