agentleFS
Sign inStart free
Effulgent-PointEffulgent-Point/paw/skills/frontend/SKILL.md

frontend

Skill2 starsChanged 4 months agoMITView on GitHub

When to use: React, Vue, or Angular work — component design, accessibility, performance, state management. These are minimums, not aspirations:

We split this skill into the rules it gives an agent

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

  • 0

    Common

    Most of the 43 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 1

    Very specific

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

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Every interactive element has an accessible label (aria-label, associated <label>, or visible text)

    line 25
  2. Distinctive:

    All functionality reachable via keyboard (Tab, Enter, Escape, Arrow keys)

    line 27

“Common” is measured: kept by at least 6 in 10 of the 43 edited versions of this file we could read. “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

Frontend Skill

When to use: React, Vue, or Angular work — component design, accessibility, performance, state management.

Component design

  • Composition over inheritance — build complex UI from small, focused components
  • Single responsibility — one component, one job. If the name needs "And", split it.
  • Props interface — keep it narrow. More than 5-7 props? The component is doing too much.
  • Prop drilling limit — more than 2 levels deep? Use context or composition (children pattern).
  • Children pattern — prefer <Layout><Content /></Layout> over render props when possible.

Hooks best practices (React)

  • Dependency arrays must be complete — ESLint rule react-hooks/exhaustive-deps is not optional
  • Effects clean up — return a cleanup function for subscriptions, timers, event listeners
  • Custom hooks — extract reusable stateful logic into useXxx hooks
  • Never call hooks conditionally — hooks must be called in the same order every render
  • Avoid useEffect for derived state — compute it during render instead

Accessibility floor (WCAG 2.1 AA)

These are minimums, not aspirations:

  • Every interactive element has an accessible label (aria-label, associated <label>, or visible text)
  • Color contrast: 4.5:1 for normal text, 3:1 for large text
  • All functionality reachable via keyboard (Tab, Enter, Escape, Arrow keys)
  • Focus management: focus moves logically on route change and modal open/close
  • ARIA landmarks on major sections (<main>, <nav>, <aside>)
  • Images: meaningful alt text, or alt="" for decorative
  • Form errors announced to screen readers (aria-live or role="alert")

Performance

  • Memoization — React.memo, useMemo, useCallback only where there's measured need. Don't prematurely optimize.
  • Virtualization — lists >100 items should use react-window or similar
  • Code splitting — at minimum, split at the route level (React.lazy + Suspense)
  • Image optimization — responsive sizes, lazy loading below the fold, modern formats (WebP/AVIF)
  • Bundle awareness — check import cost. A 500KB library for one function is not worth it.

State management

  • Local state first — useState until two components need the same state
  • Lift when needed — move state to the nearest common ancestor
  • Global for cross-cutting only — auth, theme, locale. Not form state.
  • Derived state is computed, not stored — don't duplicate state that can be calculated
  • Key props — must be stable and unique. Never use array index as key on dynamic lists.

Download now (ZIP)

  • Other versions49 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 49

    1. langwatch/langwatch★ 5ksame name
    2. atopile/atopile★ 4ksame name
    3. leookun/cursor-byok★ 3.2ksame name
    4. theopenco/llmgateway★ 1.7ksame name
    5. notque/vexjoy-agent★ 443same name
    6. notque/claude-code-toolkit★ 442same name
    7. AlexPEClub/ai-coding-starter-kit★ 382same name
    8. OyadotAI/oya-browser★ 351same name
    9. speakeasy-api/gram★ 275same name
    10. ThePrimeagen/skills★ 234same name

    39 more not listed

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use programming, backend and 8 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • DevNewbie1826Skill

      programming

      MUST USE for work on Python, Rust, TypeScript, or Go source files and project manifests. Triggers: write or edit code; new project; Go HTTP service (gin lane); Bubble Tea TUI; CJK IME; Connect-Go RPC; sqlc or pgx; branded IDs; exhaustive matching; unsafe Rust; Miri; oversized file; refactoring; logging, log levels, structured logging, or observability; arena, allocator, bumpalo, const fn, const generics, compile-time programming, zero-allocation APIs, bitfields, repr, scope guards, errdefer-style cleanup, Zig-like patterns, zero-copy parsing, packed data, or FFI; Rust public API design or macros.

      Also in 3 projects that use this

    • wewpellex21Skill

      backend

      Servers, routes, APIs, and backend architecture. Activated when Claude creates server-side code, API routes, or Express/Fastify/Next.js API handlers.

      Also in 7 projects that use this

    • launch52-aiSkill

      data

      Generate data layer code (Freezed DTOs, repository implementations, data sources) from feature specifications or API references. Creates the bridge between domain entities and external data sources. Use after /domain to implement the data layer.

      Also in 4 projects that use this

    • BlockSkill

      debugging

      Debugging guidelines and best practices

      Also in 5 projects that use this

    • MicrosoftSkill

      help

      Entry point for the MedImageInsight plugin, covering the getting-started walkthrough, how the skills work, what MI2 is, and troubleshooting.

      Also in 4 projects that use this

    • VercelSkill

      deploy

      Deploy applications to Vercel. Use when the user says "deploy", "deploy to Vercel", "push to production", "deploy my app", or "go live".

      Also in 7 projects that use this

  • In this repository9 other files it gives its agents.

Does it work?

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

Reviews can't be read right now.

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