design-guide

Name: design-guide
Availability: InStock
Author: o9nn

Provide design principles, component standards, and composition patterns for Paperclip's frontend UI.

Updated May 4, 2026

Search Tags:#frontend #react #style guide #design tokens #ui design #component standards

Ready to run

npx skills add https://github.com/o9nn/entelechorg --skill design-guide-o9nn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-guide
Source: https://github.com/o9nn/entelechorg/tree/main/.claude/skills/design-guide
Command: npx skills add https://github.com/o9nn/entelechorg --skill design-guide-o9nn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references/component-index.md (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance on UI design principles, tokens, and component standards to ensure a cohesive and accessible user interface across Paperclip's frontend.

Core Features & Use Cases

Design Principles & Best Practices: Outlines key standards for dense, keyboard-first, dark-themed interfaces.
Tech Stack & Tokens: Details on React, Tailwind, color tokens, and component variants to maintain visual consistency.
Component Composition & Patterns: Demonstrates how to build reusable, domain-aligned UI components and common layout patterns.
Living Documentation: Serves as the authoritative reference for developers to implement and extend the design system in new features.

Quick Start

Consult this skill to understand the core design rules before creating or modifying UI components.

Frequently Asked Questions about design-guide

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

FAQPage Schema

How do I establish consistent UI component standards for a React frontend?▼

To establish consistent UI component standards for a React frontend, apply detailed design principles, reusable composition patterns, and standardized tokens to ensure visual cohesion and accessibility across your application.

What design tokens should I use for building dark mode interfaces?▼

For building dark mode interfaces, use established color tokens and component variants detailed within your design system to maintain visual consistency, accessibility, and proper contrast across the user interface.

How do I create reusable React components that follow strict design principles?▼

Create reusable React components by following domain-aligned composition patterns and layout systems, enforcing adherence to established tokens to ensure strict design consistency and accessibility.

Can I use Tailwind to enforce design tokens and UI consistency in React?▼

Yes, you can use Tailwind with React to enforce design tokens and UI consistency by applying predefined color tokens, component variants, and layout systems that align with your frontend component standards.

What are the best practices for designing dense, keyboard-first interfaces?▼

Best practices for designing dense, keyboard-first interfaces include adhering to established layout systems, standardized interactive patterns, and dark-themed design tokens to ensure accessibility and efficient user interaction.

When do I need a living documentation reference for frontend UI development?▼

You need a living documentation reference for frontend UI development when creating or modifying UI components, serving as the authoritative guide to implement and extend the design system in new features.