Does it use a specific grid system?

Yes, it enforces a strict 4px base grid for all spacing, padding, and layout decisions to ensure mathematical consistency across the entire UI.

Which icon library is recommended by this skill?

The skill specifically recommends using Phosphor Icons for their clarity and professional aesthetic, treating them as functional elements rather than decoration.

What design styles does this skill support?

It supports various 'personalities' including Precision & Density (Linear style), Warmth & Approachability (Notion style), and Sophistication & Trust (Stripe style).

Can this skill be used for any frontend project?

While the repository is based on Next.js, the design principles—such as typography hierarchy, padding rules, and depth strategies—apply to any modern web interface.

How does the skill handle dark mode?

It includes specific guidelines for dark mode that prioritize subtle borders over shadows, ensuring hierarchy remains visible on dark backgrounds without feeling harsh.

High-Precision UI Architect

Name: High-Precision UI Architect
Author: rocket-generator

byrocket-generator

•

Design Tools

Enforces professional, minimalist design principles inspired by industry leaders like Linear and Stripe for enterprise-grade interfaces.

The UI-Design skill provides Claude with a comprehensive framework for creating high-end SaaS dashboards and admin interfaces. It moves beyond generic styling to offer specific design personalities—such as Precision, Warmth, or Sophistication—while strictly adhering to a 4px grid, sophisticated typography, and intentional depth strategies. This skill is ideal for developers aiming to build polished, production-ready interfaces where every pixel is intentional and the user experience feels crafted rather than templated.

Key Features

01Strict 4px grid system for layout and spacing consistency

02Sophisticated depth strategies ranging from flat borders to layered shadows

036 GitHub stars

04Custom component patterns for complex UI controls and isolated inputs

05Advanced typography hierarchy and monospace formatting for data

06Context-driven design personalities (Linear, Notion, and Stripe styles)

Use Cases

01Building high-density power-user dashboards for fintech or analytics

02Refining developer portals with monochrome aesthetics and technical precision

03Designing approachable, human-centric collaboration tools and workspaces

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rocket-generator/next-template ui-design

For use in Claude.ai and ChatGPT

Download Skill