agentleFS
Sign inStart free
IgorBabikovIgorBabikov/Flowcairn/skills/domain-frontend/SKILL.md

domain-frontend

Skill4 starsChanged 54 days agoMITView on GitHub

Apply web scenario, interface and accessibility guidance to frontend work in the current action scope.

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 2 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use semantic controls: buttons for actions, links for navigation, named icon controls and labeled fields.

    line 10
  2. Distinctive:

    Keep secrets out of bundles and untrusted text out of executable HTML.

    line 12

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Implement the user's web scenario

  • Identify route, user action, reused components/tokens, data contract and state owner. Preserve agreed visual direction/design system. Explore visual choices for a new or explicitly redesigned surface; bug fixes do not authorize a palette, font dependency or layout replacement.
  • Cover relevant loading, empty, error, success, stale-response and repeated-submit states. Trace request identity/order to the rendered result: late responses must not overwrite newer intent. Show success/proven outcomes only from corresponding runtime state. A disabled button alone does not establish server idempotency.
  • Use semantic controls: buttons for actions, links for navigation, named icon controls and labeled fields. Keep keyboard access/visible focus; overlays must not hide focus, and dragging needs accessible alternatives when applicable. Announce important async results without flooding assistive technology.
  • Verify relevant viewports, long content, overflow and zoom. Honor reduced motion; ongoing decorative motion needs appropriate stopping controls. Give typography/layout hierarchy tied to real content. Decoration/game animation must not obscure controls or invent activity. Match action names and result messages; error/empty copy explains the next useful step.
  • Keep secrets out of bundles and untrusted text out of executable HTML. Measure the relevant bottleneck before cache/memoization, virtualization or bundle changes. Preserve framework/component contracts; this method installs no tools and fetches no floating rules.
  • Propose real browser scenarios when allowed. Build/unit/mock success or a component quote cannot establish interaction, visual quality, persistence or subjective acceptance. Use suitable registered verification or contract human acceptance. Missing verifiers leave requirements unverified; never invoke forbidden tools in a read-only AI action.

Modified adaptation of anthropics/skills frontend-design and selected vercel-labs/web-interface-guidelines rules: project direction wins; auto-memory, universal aesthetics and extra lifecycle removed. Anthropic Apache-2.0; Copyright (c) 2025 Vercel Labs, MIT. Sources/changes: PROVENANCE. No vercel-labs/agent-skills React/composition text imported.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free