skills.rest
phishkatlabs
phishkatlabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

frontend-dev

Orchestrate React frontend development with a design-system-first approach.

Updated Aug 23, 2026
Search Tags:#typescript#ui#accessibility#scalability#frontend#react#design-system
One-click install
npx skills add https://github.com/phishkatlabs/phishkat-crew --skill frontend-dev-phishkatlabs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-dev
Source: https://github.com/phishkatlabs/phishkat-crew/tree/main/frontend-dev
Command: npx skills add https://github.com/phishkatlabs/phishkat-crew --skill frontend-dev-phishkatlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured approach for building scalable, production-grade frontends by enforcing design-system compliance, strict typing, and system-wide architectural discipline across projects.

Core Features & Use Cases

  • Strict design-system adherence ensures visual and interaction consistency across the app.
  • Type-safe React code with strict TypeScript usage and API contracts.
  • End-to-end frontend workflow from scaffolding to deployment, including responsive layouts, accessibility, and performance optimization.
  • Provides a repeatable process for building, testing, and shipping frontends in a team of multiple engineers.

Quick Start

Start by scaffolding a Vite + React + TypeScript project, then implement tokens-driven UI components and verify the build with npm run build.

Frequently Asked Questions about frontend-dev

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

FAQPage Schema
How do I build production-grade React UI with a design system?▼

Build production-grade React UI by enforcing a design-system-first approach using tokens-driven components, ensuring visual and interaction consistency, accessibility, and responsiveness across your application.

What's the best way to enforce accessibility and type-safety in a frontend workflow?▼

Enforce accessibility and type-safety in your frontend workflow by applying strict TypeScript usage and API contracts within a structured, tokens-driven React build pipeline to guarantee consistent outputs.

Do I need a tokens-driven design system to scaffold scalable React components?▼

Yes, you need a tokens-driven design system, a TypeScript-enabled codebase, and a build pipeline to scaffold scalable React components and ensure strict design-system compliance and production readiness.

Can I use this frontend development approach for single-component libraries as well as full-scale apps?▼

Yes, this frontend development approach applies to React-based projects of varying sizes, from single-component libraries to full-scale apps, providing a repeatable process for building and shipping UI.

How do I scaffold a Vite React TypeScript project for design-system adherence?▼

Scaffold a Vite React TypeScript project, implement tokens-driven UI components, and verify the production build pipeline using npm run build to maintain strict design-system adherence.

Related Skills

Explore More Software Engineering Skills→
getsentrygetsentry
905

presentation-creator

Scaffold a React, Vite, and Recharts presentation app with Sentry branding.

Official
Advanced
figueroaignaciofigueroaignacio
7

frontend-design

Generate frontend interfaces in HTML/CSS/JS, React, or Vue from user briefs.

Community
Advanced
fanthusfanthus

frontend-design

Generate frontend interfaces with design guidance and HTML/CSS/JS or React code.

Community
Intermediate
clovernguyen1010-ship-itclovernguyen1010-ship-it

ba-mobile-frontend-code-gen

Generate mobile frontend code from design specifications using Brand Guideline and Design System assets.

Community
Advanced