refined
CommunityProduce implementation-ready refined design guidance
Design & Creative#typography#accessibility#design system#design tokens#interaction design#UI guidelines#component states
AuthorPiercingXX
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It turns an abstract “Refined” look-and-feel into concrete, consistent rules engineers and designers can implement without guessing.
Core Features & Use Cases
- Design-system foundation authoring: defines tokens and typography/color/spacing constraints (e.g., Playfair Display, JetBrains Mono, and the provided refined palette).
- Component-level implementation rules: specifies required states, interaction behavior, responsive expectations, edge cases, and example-anchored do/don’t guidance.
- Quality gates and review-ready output: provides acceptance criteria, anti-patterns, migration notes, and a code-review QA checklist.
Quick Start
Ask the AI to generate Refined design-system guidance for a target UI component, including tokens usage, required states, accessibility acceptance criteria, and a QA checklist.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: refined Download link: https://github.com/PiercingXX/xx-stack/archive/main.zip#refined Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.