skills.rest
Jin9
Jin9COMMUNITY
Explore all skills by this author →
GitHub

crafting-frontend-code

Reviews, designs, and implements React and TypeScript frontend code with repo-first conventions.

Updated Apr 26, 2026
Search Tags:#typescript#code review#performance#accessibility#frontend#react#next.js
One-click install
npx skills add https://github.com/Jin9/skillify-foundation --skill crafting-frontend-code-jin9
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: crafting-frontend-code
Source: https://github.com/Jin9/skillify-foundation/tree/main/treasury/crafting-frontend-code
Command: npx skills add https://github.com/Jin9/skillify-foundation --skill crafting-frontend-code-jin9

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Frontend work by AI coding agents often ignores existing repository conventions, introduces unrequested dependencies, or ships changes that break accessibility, performance, or type safety. This Skill enforces a conservative, evidence-led workflow so frontend design, review, and implementation stay minimal, safe, and consistent with the codebase. ## Core Features & Use Cases - Six structured modes: design, optimize, fix, analyze, review, and plan, each with its own checklist and output contract covering component architecture, state ownership, rendering models, and trade-offs. - Deep reference library: on-demand guidance for accessibility (WCAG 2.2 AA), Core Web Vitals performance budgets, TanStack Query and Zustand state patterns, TypeScript strictness, testing with Vitest and Playwright, security (XSS, CSRF, CSP), and design systems. - Safety guardrails: explicit constraints against unrequested migrations, dependency additions, auth or CSP changes, and broad refactors, plus a validation gate before every response. - Use Case: Ask the agent to review a React PR; it returns severity-tagged (P1/P2/P3) findings across a11y, performance, type safety, and security with file/line evidence and concrete fixes, without editing code unless asked. ## Quick Start Ask the agent to review your React component or design a new frontend feature, for example: review this LoanForm component for accessibility, performance, and type-safety issues.

Frequently Asked Questions about crafting-frontend-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I review a React component for accessibility and performance issues?▼

Use the review mode, which produces severity-tagged P1/P2/P3 findings across accessibility, performance, type safety, and security with concrete fixes and file/line references. It checks WCAG 2.2 AA criteria, Core Web Vitals budgets, and XSS/CSRF/CSP risks without editing code.

What state management should I use for React server data vs client state?▼

Server data belongs in a cache like TanStack Query, while client state uses useState locally, Zustand for cross-page state, and the URL for filters and pagination. The key rule is to avoid mirroring server data into client stores, which causes re-render and synchronization bugs.

Next.js vs Vite: which framework should I choose for a React app?▼

Choose Next.js for SEO-sensitive, product-facing pages needing SSR, SSG, or Server Components, and Vite for internal tools, dashboards behind auth, or embedded libraries. Existing apps should not switch frameworks without an explicit migration plan.

Why does my React component lose focus and re-mount on every keystroke?▼

This happens when a component is defined inside another component's body, creating a new function identity each render so React unmounts and remounts the subtree. The fix is hoisting the inner component to module scope, which is behavior-preserving.

When should I not use this frontend workflow?▼

Skip it for backend business logic, Terraform or generic CI work, Node-only CLI tasks with no UI surface, and trivial changes like one-line CSS tweaks or copy edits. Small isolated fixes use a fast path instead of the full L1 to L4 design framework.

Related Skills

Explore More Software Engineering Skills→
gfcampos1gfcampos1

frontend-implementation

Implement frontend features using detected framework conventions and TypeScript preferences.

Community
Advanced
LimaTechnologiesLimaTechnologies

quality-gate

Run typecheck, lint, tests, and build for TypeScript projects.

Community
Advanced
jammindevjammindev

gen-api

Regenerate TypeScript API client types from a Django OpenAPI schema.

Official
Intermediate
kubiyabotkubiyabot
16

terraform

Automate Terraform infrastructure-as-code tasks by wrapping the native CLI.

Official
Advanced