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:

• Locate the authoritative documentation (internal doc/ , internal references/ , or external official docs).

• Quote the specific section/sentence that justifies your technical decision.

• 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

• Zero-Bundle Budget: Every kilobyte must justify its existence.

• Hydration is Overhead: If it can be static, it MUST be static.

• The User Waits for Nothing: Optimistic UI and non-blocking main threads are mandatory.

• 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

• Identify the needed technology (e.g., "I need to optimize images in Next.js").

• 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.

• 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)

• Write Code: Implement exactly as the evidence suggests.

• Optimize: Look for low-hanging fruit (memoization, lazy loading).

• 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.