How does it handle interactivity?

It prioritizes keyboard shortcuts, inline editing, and springy micro-interactions to create a responsive and intuitive user experience.

Does it support accessibility?

Yes, by enforcing high-contrast text and specific keyboard navigation paths (Enter, Esc, Tab), it builds a foundation for accessible web tools.

Can I use this for other applications?

While optimized for the Achievement Tree app, its principles of 'zero-base' UI and strict rhythm can serve as a template for other high-quality, custom interfaces.

Does this skill use Tailwind CSS?

No, it avoids generic CSS frameworks like Tailwind in favor of a custom, shadow-dom-encapsulated design system for a more unique and polished feel.

What is the Achievement Tree Design System?

It is a specialized Claude Code skill designed to enforce a specific, high-fidelity visual and interaction language for building tree-based achievement apps.

Achievement Tree Design System

Name: Achievement Tree Design System
Author: rrih

byrrih

0•

Design Tools

Generates custom, high-fidelity UI components for the Achievement Tree application using a proprietary visual and interaction framework.

This skill provides a comprehensive design system for building the Achievement Tree application, ensuring a unique and professional aesthetic that moves beyond generic AI-generated interfaces. It enforces a strict visual language including specific typography, an 8px spacing rhythm, and springy motion dynamics, all contained within a Shadow DOM to prevent style leakage. By prioritizing keyboard shortcuts and inline editing, it helps developers create highly interactive, 'zero-base' user interfaces that feel like hand-crafted products rather than template-based agent outputs.

Key Features

010 GitHub stars

02Keyboard-first interaction patterns (Enter, Esc, Tab)

03Proprietary shape language and high-contrast color strategy

04Strict 8px spacing and rhythm enforcement

05Shadow DOM-ready styling with custom resets

06Springy micro-interactions and motion language

Use Cases

01Building a custom node-based achievement tracking interface

02Implementing high-performance UI components that avoid CSS collisions

03Developing interactive productivity tools with a unique visual identity

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rrih/rrih.github.io achievement-tree-design-system

For use in Claude.ai and ChatGPT

Download Skill