skills.rest
joySUSY
joySUSYCOMMUNITY
Explore all skills by this author →
GitHub

frontend-dev

Guides React component architecture, Tailwind styling, accessibility compliance, and SVG generation for frontend interfaces.

Updated Feb 21, 2026
Search Tags:#accessibility#frontend architecture#react#responsive design#tailwind css#wcag#svg generation
One-click install
npx skills add https://github.com/joySUSY/violet-plugin-place --skill frontend-dev-joysusy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/joySUSY/violet-plugin-place/tree/main/plugins/frontend-dev
Command: npx skills add https://github.com/joySUSY/violet-plugin-place --skill frontend-dev-joysusy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve? Building modern user interfaces requires juggling component architecture, styling strategy, accessibility standards, and responsive design simultaneously, and inconsistent decisions across these areas produce unmaintainable frontend code. ## Core Features & Use Cases - Component Architecture Guidance: Enforces container/presenter separation, state management hierarchy (URL state, server state, local state, global state), and composition-based component APIs. - Design Engineering Standards: Provides algorithmic theming with HSL color math, dark mode via CSS variables, and optimized SVG generation with responsive viewBoxes. - Accessibility & Styling Compliance: Applies WCAG 2.2 AA contrast rules, semantic HTML requirements, 8-point grid spacing, and Tailwind/CSS variable theming patterns. - Use Case: When asked to refactor a 400-line React component, load this Skill to split data fetching into a container, extract a pure presentational component, move server state to React Query, and fix contrast ratios to meet WCAG 2.2 AA. ## Quick Start Ask the AI to review or build a React component using the frontend-dev engine, for example: refactor this component to separate business logic from rendering and apply the 8-point spacing grid.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I refactor a large React component into smaller pieces?▼

Split it into a container component that fetches data and manages side effects, and a presentational component that only receives props and renders UI. Components over roughly 200 lines usually mix these concerns and should be separated.

What is the best way to manage state in a React application?▼

Keep state as close to its usage as possible: URL parameters for shareable state, React Query or SWR for server data, useState for local UI state, and reserve global stores like Zustand or Redux for truly global concerns like auth.

How do I implement dark mode with Tailwind CSS?▼

Define HSL-based CSS custom properties at the :root level and redefine them under a .dark class, then have Tailwind consume them via hsl(var(--background)). Avoid hardcoding hex values inside components.

What contrast ratio does WCAG 2.2 AA require for text?▼

WCAG 2.2 AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text of 18pt or larger. Use mathematical HSL lightness scales rather than guessing color pairs.

Which CSS properties are safe to animate for 60fps?▼

Only animate transform and opacity, since they are GPU-accelerated. Animating width, margin, or top triggers layout repaints and drops frame rates; keep UI transitions between 150ms and 200ms with ease-out timing.

Related Skills

Explore More Software Engineering Skills→
krzemienskikrzemienski
2

design-token-audit

Extract design tokens from DESIGN.md, tailwind.config, and CSS variables to compare against implementation.

Community
Advanced
etewiahetewiah
635

e2e-testing

Automate Playwright E2E tests and Lighthouse audits in CI/CD.

Community
Intermediate
ImaginerLabsImaginerLabs

react-component-extraction

Extract reusable React components and custom Hooks with TypeScript prop typings.

Official
Intermediate
aiguy611aiguy611

swiftui-app-builder

Build multi-platform SwiftUI apps with integrated services and deployment.

Community
Advanced