skills.rest
marcusta
marcustaCOMMUNITY
Explore all skills by this author →
GitHub

frontend-design

Enforce TapScore design constraints on frontend UI components.

Updated May 25, 2025
Search Tags:#accessibility#frontend#design-system#ui-implementation#tapscore
One-click install
npx skills add https://github.com/marcusta/golf-serie --skill frontend-design-marcusta
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/marcusta/golf-serie/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/marcusta/golf-serie --skill frontend-design-marcusta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures frontend implementations adhere to TapScore's fixed design system, preventing inconsistent aesthetics and generic AI templates.

Core Features & Use Cases

  • Enforces typography, color palettes, spacing, shadows, and accessibility rules across components, pages, and layouts.
  • Validates alignment with visual-design-rules.md and STYLE_GUIDE.md during the development process.
  • Real-world use: apply to dashboards, forms, and product pages to maintain a cohesive, professional interface.

Quick Start

Style a single-page login form using TapScore guidelines.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I enforce design system constraints on frontend UI components?▼

To enforce design system constraints on frontend UI components, this skill validates typography, color palettes, spacing, shadows, and accessibility against TapScore's visual-design-rules.md and STYLE_GUIDE.md during implementation.

What is the best way to maintain visual hierarchy in frontend dashboards?▼

Maintaining visual hierarchy in frontend dashboards requires planning approved patterns and validating compliance against a fixed design system, ensuring cohesive typography, spacing, and shadows across all pages and layouts.

How do I validate accessibility rules during frontend UI implementation?▼

Validating accessibility rules during frontend UI implementation involves reading required documentation and performing automated accessibility validation to ensure components meet specific visual-design-rules.md standards.

How do I prevent generic AI templates in frontend design implementation?▼

Preventing generic AI templates in frontend design implementation requires enforcing fixed design constraints on components, pages, and layouts, ensuring aesthetics align strictly with TapScore's STYLE_GUIDE.md.

Does frontend-design work with standard login forms and product pages?▼

Yes, frontend-design works with standard login forms and product pages by applying TapScore guidelines to maintain a cohesive, professional interface across various component implementations.

Related Skills

Explore More Design & Creative Skills→
wubq511wubq511
6

design-taste-frontend

Generate frontend designs with intentional aesthetic direction from user briefs.

Community
Advanced
Factory-AIFactory-AI
101

frontend-design

Build web app, landing page, and UI component interfaces with design systems.

Official
Advanced
luanrodriguesluanrodrigues
2

bee:dev-frontend-accessibility

Validate frontend components against WCAG 2.1 AA with axe-core and keyboard tests.

Community
Advanced
NITRR-OfficialNITRR-Official
4

frontend-design

Create unique frontend web designs with HTML/CSS and React.

Official
Advanced