skills.rest
tannergolden
tannergoldenCOMMUNITY
Explore all skills by this author →
Website𝕏@tannergoldenGitHub

Frontend Developer

Automate frontend UI component development with WCAG accessibility and design tokens.

Updated Aug 23, 2026
Search Tags:#ui#performance#accessibility#frontend#component#web-vitals
One-click install
npx skills add https://github.com/tannergolden/repository --skill frontend-developer-tannergolden
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Developer
Source: https://github.com/tannergolden/repository/tree/main/.agent/storage/skills/frontend
Command: npx skills add https://github.com/tannergolden/repository --skill frontend-developer-tannergolden

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend UI development often suffers from inconsistency, accessibility gaps, and performance disparities across teams. This skill provides a structured approach to building UI components that adhere to a common standard, reducing rework and improving user experience.

Core Features & Use Cases

  • Component architecture guided by coding-style.md to ensure consistency.
  • Accessibility and performance guidance to meet WCAG and web-vitals targets.
  • Use Case: Build a reusable button component library with responsive states and tokens.

Quick Start

Design and implement a reusable frontend component that follows the project’s coding-style.md and accessibility guidelines.

Frequently Asked Questions about Frontend Developer

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

FAQPage Schema
How do I build accessible UI components that meet WCAG standards?▼

Build accessible UI components by following structured component architecture that enforces WCAG guidelines. This approach ensures responsive interface elements meet compliance standards and reduces rework caused by accessibility gaps across teams.

What is the best way to enforce component consistency in frontend web development?▼

Enforce component consistency by applying architecture rules from coding-style.md alongside design tokens. This standardizes layout systems and component states, ensuring UI elements adhere to a common standard across your project.

How do I optimize web-vitals performance when creating a reusable component library?▼

Optimize web-vitals by integrating performance budgets into your component architecture. This tracks and enforces performance targets during UI development, ensuring responsive components do not degrade overall user experience.

Can I use design tokens to standardize responsive states across a frontend project?▼

Yes, you can use design tokens to standardize responsive states. By defining token-based architecture, the skill ensures components adapt consistently across different layouts while maintaining accessibility and performance targets.

Does this frontend UI approach require specific dependencies to manage layout systems?▼

No, this frontend UI approach does not require specific dependencies to manage layout systems. It relies on a structured coding-style.md architecture to enforce consistency, accessibility, and performance without external modules.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

tailwind-design-system

Build scalable Tailwind v4 design systems with tokens and responsive patterns.

Community
Intermediate
bgarciasbgarcias

pagespeed-audit

Audit websites for performance, accessibility, and best-practice gaps.

Community
Advanced
Exia-thdExia-thd

performance-engineer

Profile web applications and generate k6/Artillery load testing scripts.

Community
Advanced
huangwb8huangwb8
47

frontend-specialist

Design frontend architectures and component systems for React/Vue apps.

Community
Intermediate