🎯

daily-writing-friends-design

🎯Skill

from bumgeunsong/daily-writing-friends

What it does

Provides a comprehensive design system for Daily Writing Friends, ensuring consistent UI components, styling, and accessibility across the application.

📦

Part of

bumgeunsong/daily-writing-friends(12 items)

daily-writing-friends-design

Installation

git cloneClone repository

git clone https://github.com/BumgeunSong/daily-writing-friends.git

npm runRun npm script

npm run dev

📖 Extracted from docs: bumgeunsong/daily-writing-friends

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Design system for Daily Writing Friends app. MUST use when doing ANY UI work including components, pages, buttons, forms, styling, Tailwind CSS, dark mode, theming, layouts, cards, inputs, or visual changes. Ensures consistent design tokens, button hierarchy, and accessibility.

Overview

# Daily Writing Friends Design System

Follow these guidelines for ALL UI-related work in this project.

Design Documentation

For detailed reference, see the design docs:

[tokens.md](../../../docs/design/tokens.md) - Colors, typography, spacing
[buttons.md](../../../docs/design/buttons.md) - Button hierarchy and usage
[components.md](../../../docs/design/components.md) - Cards, inputs, interactions
[theme.md](../../../docs/design/theme.md) - Dark mode, accessibility, mobile

---

Quick Reference

Color System (CSS Variables)

```css

/ Light Mode /

--background: hsl(0, 0%, 100%);

--foreground: hsl(0, 0%, 9%);

--accent: hsl(210, 100%, 50%);

/ Dark Mode /

--background: hsl(180, 4%, 12%);

--foreground: hsl(180, 3%, 92%);

--accent: hsl(210, 100%, 70%);

```

Button Hierarchy (Most to Least Important)

| Variant | Use For | Example |

|---------|---------|---------|

| cta | Critical conversions | Signup, Join, Main FAB |

| default | Main interactions | Login, Save, Submit |

| outline | Supporting actions | Drafts, Cancel |

| ghost | Subtle actions | Edit, Navigation, Logout |

| destructive | Dangerous actions | Delete (red ghost style) |

```tsx

// CTA - most important

// Primary - main action

// Secondary - supporting

// Ghost - subtle

// Destructive - dangerous (ghost style with red text)

```

Ghost Button Override Pattern

When ghost buttons need consistent styling on hover:

```tsx

variant="ghost"

className="text-foreground hover:bg-transparent hover:text-foreground"

```

Component Styling

```tsx

// Card

// Input

// Link

```

More from this repository10

🎯

refactoring🎯Skill

Refactors code by extracting pure functions from side-effect-laden logic, enabling easier testing and maintainability.

🎯

code-style🎯Skill

Enforces clean, readable code by providing guidelines for function design, naming conventions, and code clarity principles.

🎯

testing🎯Skill

Enforces output-based testing of pure functions, guiding developers to write testable code by focusing on functional core transformations.

🎯

react-hook🎯Skill

I apologize, but I cannot generate a description without seeing the specific details about the "react-hook" skill from the repository. Could you provide more context or details about what this part...

🎯

pr-stacking🎯Skill

Enables developers to break large features into smaller, dependent PRs for incremental development and easier code reviews.

🎯

api-layer🎯Skill

Manages API interactions and request handling for the Daily Writing Friends application, facilitating communication between frontend and backend services.

🎯

skill-creator🎯Skill

Guides developers in designing Claude Skills using progressive disclosure, optimizing skill architecture and content creation.

🎯

fetching-pr-comments🎯Skill

Retrieves and parses GitHub PR review comments for the current branch using GitHub CLI, enabling quick review of code-level feedback.

🎯

firebase-functions🎯Skill

Streamlines Firebase Cloud Functions development with structured TypeScript patterns, error handling, and organized function implementations.

🎯

commit🎯Skill

Stages and commits git changes following specific Korean commit message guidelines for clean, meaningful version control.