AthenodeAthenode

Back to Frontend Design

AGENTS.md

155 words937 of 50,000 characters

Instructions every agent in this plugin follows. They're installed into your project as AGENTS.md.

Frontend design

  • In a project with a design system, tokens or a component library, use them: follow the frontend-design skill's direction only where the project has no decision of its own, and never introduce a second styling approach.
  • For new UI start from the frontend-design skill; to improve existing UI start from the redesign-existing-projects skill and keep the behaviour unchanged.
  • Look at what you built before calling it done: open the page (the playwright MCP server when it is available) at a phone width and a desktop width, in light and dark themes when the project has both.
  • Every interactive element works from the keyboard, has a visible focus state and an accessible name; text meets WCAG AA contrast.
  • Animate only with a purpose, on transform and opacity, and honour prefers-reduced-motion.
  • Design for real content: long names, empty lists, loading and error states, not only the happy case.

Start with one mind map

Create a free account and a project, run one command in your repository and answer your agent's questions about the next thing you want to build.

Start for free

The Free plan covers up to 3 projects.