skills.rest
rymqan
rymqanCOMMUNITY
Explore all skills by this author โ†’
GitHub

frontend-design

Enforces the StapleTech visual design system across Next.js frontend components and layouts.

Updated Apr 13, 2026
Search Tags:#accessibility#frontend#design system#next.js#design tokens#tailwind css#component patterns
One-click install
npx skills add https://github.com/rymqan/staple-tech --skill frontend-design-rymqan
Or copy as Structured Prompt for Agentโ–ผ
Please help me install this Agent Skill.
Skill: frontend-design
Source: https://github.com/rymqan/staple-tech/tree/main/.claude/skills/frontend-design
Command: npx skills add https://github.com/rymqan/staple-tech --skill frontend-design-rymqan

SYSTEM DOCUMENTATION & REQUIREMENTS

๐Ÿ’ก This Skill requires lucide-react, next-intl, tailwindcss.

What problem does it solve? Frontend code drifts from the approved prototype when developers hardcode colors, fonts, and spacing values. This Skill provides a single source of truth for the StapleTech AI Marketing Platform's visual design system, extracted from the prototype, so every component matches the intended warm dark theme with terracotta accents. ## Core Features & Use Cases - Design Token Enforcement: Defines CSS custom properties and Tailwind config mappings for colors, typography (Instrument Serif + DM Sans), border radius, shadows, and animation keyframes, banning hardcoded hex values in .tsx files. - Component Patterns: Specifies five canonical patterns (hoverable cards, status badges, overline labels, progress bars, type icons) with exact class strings and semantic color mappings. - Layout & Accessibility Rules: Fixes the three-panel workspace layout widths (64px/220px/320px) and enforces WCAG AA contrast, focus rings, reduced-motion support, and aria-labels. - Use Case: When building a new campaign dashboard page, apply the token system, StatusBadge color mappings, and fixed panel widths so the ui-reviewer subagent passes the code without violations. ## Quick Start Apply the frontend-design skill to build a new campaign card component that follows the StapleTech design tokens and component patterns.

Frequently Asked Questions about frontend-design

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

FAQPage Schema
How do I apply a design token system in Tailwind CSS?โ–ผ

Define CSS custom properties in globals.css under :root, then map them in tailwind.config.ts under theme.extend.colors, fontFamily, borderRadius, and boxShadow. Reference tokens via utilities like bg-bg or text-accent instead of hardcoded hex values.

How do I port a React prototype with inline styles to Tailwind?โ–ผ

Convert every inline style referencing a theme constant into a Tailwind utility backed by a CSS custom property. If no mapping exists, add a new token to globals.css and tailwind.config.ts first; arbitrary value classes like text-[#xxx] are not permitted.

What icon library works with Next.js and Tailwind design systems?โ–ผ

This project uses lucide-react exclusively with strokeWidth 1.8 and a size scale of 14, 16, 18, and 22 pixels. Icon colors must reference design tokens via Tailwind classes, and icon-only buttons require aria-label attributes.

Does this design system support dark theme accessibility?โ–ผ

Yes, it defines a warm dark palette and enforces WCAG AA contrast. The dimmest text token fails AA on the base background, so it is restricted to non-essential labels like overlines and timestamps, never primary content.

Why should I avoid Tailwind's default animate-pulse?โ–ผ

Tailwind's default animate-pulse runs at 2 seconds, while the prototype specifies 1.4 seconds. Use the custom animate-pulse-slow keyframe instead, and wrap animations in motion-safe: to respect prefers-reduced-motion settings.

When should hardcoded strings be avoided in React components?โ–ผ

All user-visible strings must go through next-intl message catalogs (ru.json primary, en.json secondary) using useTranslations or getTranslations. Only AI-generated content fetched from the database is exempt, since it is data rather than UI copy.

Related Skills

Explore More Design & Creative Skillsโ†’
Sir-chawakornSir-chawakorn
33

vision-to-code

Convert UI screenshots and design mockups into HTML, CSS, and React components.

Community
Intermediate
simstudioaisimstudioai
29.5k

emcn-design-review

Review UI code for compliance with the emcn design system components, tokens, and conventions.

Official
Intermediate
monam2monam2

i18n

Configure Next.js multilingual UI with next-intl and message catalogs.

Community
Basic
ucdavisucdavis
8

frontend

Generate distinctive frontend interfaces with HTML, CSS, JS, React, or Vue.

Official
Advanced