agentleFS
Sign inStart free
qyndexqyndex/claude-init/.claude/skills/creative-web/SKILL.md

creative-web

Skill2 starsChanged 5 months agoMITView on GitHub

Use when a spec EXPLICITLY warrants "wow factor" beyond default Tailwind — parallax, 3D, generative art, scroll-triggered storytelling. Hard-guardrailed by Lighthouse perf ≥ 90, a11y = 100. Round 9 C.

The file

We split this skill into the rules it gives an agent

8 rules. About 0 are common, 7 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈7

    Distinctive · estimate

    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. Distinctive:

    When the spec calls for visual ambition — interactive surfaces, 3D scenes, scroll storytelling, generative art — execute with discipline.

    line 14
  2. Distinctive:

    If creative payload breaks these — REJECT.

    line 35
  3. Distinctive:

    Keyboard-operable: All interactive surfaces respond to Tab + Enter/Space, not just mouse.

    line 41
  4. Distinctive:

    Read spec; confirm creative ambition is the ASK, not a wish

    line 48
  5. Very specific:

    Add creative layer behind dynamic(() => …, { ssr: false })

    line 52
  6. Distinctive:

    Add keyboard handlers + ARIA descriptions

    line 54
  7. Distinctive:

    Run Lighthouse + axe locally.

    line 55
  8. Distinctive:

    Commit with CONCEPT.md + visual diff (Playwright screenshot in verify/)

    line 56

≈ “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

Creative Web

Mandate

When the spec calls for visual ambition — interactive surfaces, 3D scenes, scroll storytelling, generative art — execute with discipline. The wow must NEVER come at the cost of accessibility, performance, or core UX.

Tools allowed

  • framer-motion — stateful component motion (with useReducedMotion)
  • three.js / @react-three/fiber + drei — 3D scenes
  • GSAP + ScrollTrigger — scroll-driven storytelling
  • p5.js / canvas / WebGL fragment shaders — generative art
  • spline-react — designer-imported 3D scenes
  • lottie-react — vector animation playback

Hard guardrails (CI-enforced)

MetricTargetEnforced by
Lighthouse perf≥ 90lighthouse.yml
Lighthouse a11y100lighthouse.yml
LCP≤ 2.5sperf-budget.yml
FID/INP≤ 200msperf-budget.yml
Bundle< 500KB above-the-foldbundle-budget script

If creative payload breaks these — REJECT. Either downsize or move below-the-fold.

Discipline rules

  • Lazy-load all heavy payloads. dynamic(() => import('./Scene'), { ssr: false }) for client-only 3D.
  • Static fallback above the fold. Hero image + headline render INSTANTLY; interactive scene loads after.
  • Keyboard-operable. All interactive surfaces respond to Tab + Enter/Space, not just mouse.
  • ARIA descriptions on non-decorative canvas. Tell screen readers what they're missing.
  • prefers-reduced-motion respected. Static alternative for the whole creative payload.
  • Document the CONCEPT. Sibling CONCEPT.md next to the component: one paragraph on what it is and why.

Procedure

  1. Read spec; confirm creative ambition is the ASK, not a wish
  2. Sketch concept in CONCEPT.md
  3. Decide tech: framer-motion / r3f / GSAP / p5 / spline
  4. Static fallback FIRST — ship without interactivity
  5. Add creative layer behind dynamic(() => …, { ssr: false })
  6. Add prefers-reduced-motion short-circuit
  7. Add keyboard handlers + ARIA descriptions
  8. Run Lighthouse + axe locally; iterate until thresholds met
  9. Commit with CONCEPT.md + visual diff (Playwright screenshot in verify/)

Anti-patterns (immediate reject)

  • 3D scene in initial bundle (LCP killer)
  • Canvas without ARIA description
  • No prefers-reduced-motion opt-out
  • Scroll-jacking that fights browser scroll
  • Particle systems on low-end mobile (no LOD or quality switch)
  • Lottie files >100KB (use SVG + framer-motion instead)

References

Done means

  • Lighthouse perf ≥ 90, a11y = 100
  • LCP ≤ 2.5s on 4G
  • prefers-reduced-motion works
  • Keyboard-operable
  • CONCEPT.md documents the artistic intent

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