Frontend Development Standards

This skill provides expert-level guidelines for frontend code quality, runtime performance, and pixel-perfect implementation.

🛑 THE GOLDEN RULE: "Quote First"

You must NEVER write code without first citing your source.

Before implementing any feature or fixing any bug, you must:

1. Locate the authoritative documentation (internal doc/, internal references/, or external official docs).
2. Quote the specific section/sentence that justifies your technical decision.
3. Implement strictly according to that quote.

If you cannot find a source, you must PAUSE and use search_web or ask the user.

🧠 The "Performance Obsessed" Mindset

1. Zero-Bundle Budget: Every kilobyte must justify its existence.
2. Hydration is Overhead: If it can be static, it MUST be static.
3. The User Waits for Nothing: Optimistic UI and non-blocking main threads are mandatory.
4. Accessibility is NOT Optional: A div with an onClick is a bug. Use semantic HTML.

📚 Dynamic Knowledge Base

ACTION: At the start of every task, check package.json and load the corresponding knowledge source.

Sub-Skills (Framework-Specific)

These are complete sub-skills with their own rules, examples, and guidelines. Load the entire sub-skill SKILL.md when working with these frameworks:

Tech Stack	Sub-Skill Path	Key Focus
React / Next.js	react/SKILL.md	RSCs, Suspense, Streaming, Server Actions

Reference Files

General reference guides for frameworks without full sub-skills yet:

Tech Stack	Reference File	Key Focus
Universal Base	references/core-performance.md	Always load this. Web Vitals, A11y, HTTP/3
Vue / Nuxt	references/vue-nuxt.md	Composition API, Nitro, Nuxt Modules
Angular	references/angular.md	Signals, Standalone Components, Zone-less
Svelte/Solid/Qwik	references/modern-signals.md	Fine-grained reactivity, Resumability

🛠 Workflow: The "Evidence-Based" Loop

Phase 1: Discovery & Citation

1. Identify the needed technology (e.g., "I need to optimize images in Next.js").
2. Fetch Source: Load the appropriate sub-skill OR reference file:
   • For React/Next.js: Read react/SKILL.md and relevant rules in react/rules/
   • For other frameworks: Read corresponding references/*.md file
   • Or search official docs if not available.
3. State Evidence:

   "According to Next.js docs (referenced in react/SKILL.md), we should use the <Image> component with sizes to prevent layout shift."

Phase 2: Implementation (The Engineer's Core)

1. Write Code: Implement exactly as the evidence suggests.
2. Optimize: Look for low-hanging fruit (memoization, lazy loading).
3. Verify Compliance: Check against references/core-performance.md.
   • Did I add alt text?
   • Did I avoid useEffect for derived state?

Phase 3: Self-Correction

Before showing code to the user, run this mental audit:

• Is this creating a hydration mismatch? (SSR frameworks)
• Is this blocking the main thread? (Long tasks)
• Could this function be smaller? (Code complexity)

🚀 Framework-Specific Philosophies

React & Next.js

• Server Components First: Client components are the exception, not the rule.
• Fetch in Components: No useEffect data fetching. Use Server Components or React Query.

Vue & Nuxt

• Composables over Mixins: Never use Mixins.
• Auto-imports: Use them responsibly, but know where they come from.

Angular

• Signals over Observables: For synchronous state, use Signals. RxJS is for events.
• Standalone: No NgModules unless legacy.

Svelte / Solid / Qwik

• Reactivity is Fine-Grained: Never clone the whole object. Update the specific field.
• Resumability (Qwik): Do not execute JS just to hydrate.

---