skills.rest
tcytan
tcytanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

team-frontend

Transform frontend requirements into design tokens, component specs, and UI code.

1|Updated May 12, 2026
Search Tags:#accessibility#frontend#workflow orchestration#design tokens#ui-ux#component architecture#qa audit
One-click install
npx skills add https://github.com/tcytan/tecton --skill team-frontend-tcytan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-frontend
Source: https://github.com/tcytan/tecton/tree/main/.claude/skills/team-frontend
Command: npx skills add https://github.com/tcytan/tecton --skill team-frontend-tcytan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It streamlines end-to-end frontend development by turning unclear product requirements into a cohesive design system, implementable component architecture, and quality-assured UI deliverables—without skipping accessibility and design compliance.

Core Features & Use Cases

  • Requirement analysis & pipeline orchestration: Clarifies scope (page/feature/system), selects an appropriate beat pipeline, and coordinates roles to produce the right artifacts in the right order.
  • Design intelligence + tokenization: Retrieves industry-oriented UI/UX guidance, then generates a design token system (including light/dark support) and token-driven styling rules.
  • Component specs and implementation: Produces component architecture/specs and implements frontend code that follows token usage, responsive rules, focus-visible accessibility, and reduced-motion considerations.
  • QA audit with iterative fixes: Runs a 5-dimension audit (code quality, accessibility, design compliance, UX best practices, pre-delivery) and can trigger bounded developer→QA rework when fixes are required.

Quick Start

Use the team-frontend skill to build a responsive accessible React or Next.js UI feature from a short product description, including design tokens, component specs, implementation, and a QA audit.

Frequently Asked Questions about team-frontend

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

FAQPage Schema
How do I build an accessible React UI from a short product description?▼

To build an accessible React UI from a short product description, this skill orchestrates a pipeline to analyze requirements, generate token-driven design systems, implement component architecture, and run a weighted accessibility compliance audit.

How do I generate design tokens for frontend component architecture?▼

To generate design tokens for frontend component architecture, this skill retrieves industry-oriented UI/UX guidance and produces a token system with light/dark support, driving component styling rules and responsive implementation.

What is the best way to automate accessibility audits during frontend implementation?▼

Automating accessibility audits during frontend implementation is handled by a 5-dimension QA audit evaluating code quality, accessibility, and design compliance, which triggers bounded developer-to-QA rework loops when fixes are required.

Can I use this workflow orchestration for full system frontend development?▼

Yes, you can use this workflow orchestration for full system frontend development because it adapts the pipeline across analyst, architect, developer, and QA roles to produce structured artifacts for page, feature, and full system scopes.

Does this frontend workflow enforce reduced-motion and focus-visible rules?▼

This frontend workflow strictly enforces reduced-motion and focus-visible rules by applying token-driven styling constraints during component implementation and subsequently verifying these UX best practices in the pre-delivery QA audit.

Related Skills

Explore More Software Engineering Skills→
cshyangcshyang

gsd:workflow:discovery-phase

Plan and execute a project discovery phase to define requirements and scope.

Community
Intermediate
phoenicisfphoenicisf

figma-implement-design

Translate Figma designs into production-ready UI code.

Community
Advanced
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
DanielPodolskyDanielPodolsky
274

accessibility-fundamentals

Identify and fix accessibility issues in JSX UI components using WCAG, ARIA, and keyboard navigation.

Community
Basic