skills.rest
jbreel77888
jbreel77888COMMUNITY
Explore all skills by this author →
GitHub

refined

Generates implementation-ready design system guidelines using Refined tokens, typography, and accessibility rules.

Updated Jun 20, 2026
Search Tags:#typography#accessibility#WCAG#design system#design tokens#UI guidelines#component rules
One-click install
npx skills add https://github.com/jbreel77888/Ai-Agnet --skill refined-jbreel77888
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: refined
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/refined
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill refined-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building UIs often lack consistent, opinionated design-system guidance, leading to inconsistent spacing, low-contrast text, and ambiguous component rules. This Skill produces structured, implementation-ready design guidelines grounded in the Refined style's tokens and foundations. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #3B82F6, secondary #8B5CF6, semantic states), typography scale (12/14/16/20/24/32 with Playfair Display and JetBrains Mono), and spacing scale (4/8/12/16/24/32). - Component-Level Rules: Specifies anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior for components. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements with testable acceptance criteria, anti-patterns, and a code-review-ready QA checklist. - Use Case: A designer-engineer pair needs to document a button component for a minimal serif-styled product; the Skill outputs token usage, interaction states, accessibility criteria, and migration notes for inconsistent legacy UI. ## Quick Start Use the refined skill to generate design-system guidelines for a card component including tokens, states, and accessibility criteria.

Frequently Asked Questions about refined

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

FAQPage Schema
How do I create design system guidelines for UI components?▼

Define tokens and foundational constraints first, then specify component anatomy, variants, states, and interaction behavior. This Skill follows a six-step authoring workflow ending with accessibility acceptance criteria and a QA checklist executable in code review.

What color and typography tokens does the Refined style use?▼

Refined uses primary #3B82F6, secondary #8B5CF6, success #16A34A, warning #D97706, and danger #DC2626. Typography uses Playfair Display for headings and body with JetBrains Mono for labels, on a 12/14/16/20/24/32 scale.

Does the Refined skill support accessibility requirements?▼

Yes, it targets WCAG 2.2 AA with keyboard-first interactions and visible focus states. Every accessibility statement must be testable in implementation, and conflicts between aesthetics and accessibility are resolved in favor of accessibility.

What component states should design system documentation include?▼

Documentation should define default, hover, focus-visible, active, disabled, loading, and error states as relevant. It should also describe keyboard, pointer, and touch interaction behavior plus responsive edge cases like long labels and empty states.

When should I not use a minimal serif design style?▼

Avoid it when the product requires high-density data displays or a playful brand voice, since Refined targets modern minimal aesthetics with elegant serif typography. Its opinionated tokens may conflict with brands needing vibrant or illustrative palettes.

Related Skills

Explore More Design & Creative Skills→
launchapp-devlaunchapp-dev
38

design-token-audit

Audit design token usage across multi-project design systems to identify inconsistencies and gaps.

Official
Advanced
muhammaddadumuhammaddadu
1

tailwind-v4-shadcn

Configure Tailwind CSS v4 with shadcn/ui, Vite, React, and dark mode theming.

Community
Advanced
Vincri126Vincri126

accessibility

Audit digital interfaces for WCAG 2.2 AA compliance issues.

Community
Advanced
aleph23aleph23

ui-styling

Provision a shadcn/ui and Tailwind design system for React applications.

Community
Intermediate