词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code design-language-system for portfolio cards

Apply existing theme variables, type hierarchy, spacing, and interaction rules across article and project cards.

中文

Install in Claude Code

Use Claude Code with the portfolio theme and existing components. Check its actual Tailwind variables and visual conventions first.

  1. Review `.claude/skills/design-language-system/SKILL.md` and its requirements at the pinned GitHub commit.
  2. Create `.claude/skills/design-language-system/` in your project and save the reviewed file as `.claude/skills/design-language-system/SKILL.md`.
  3. Start Claude Code from that project's root, then select `/design-language-system` in the slash menu.

Example task

Portfolio fixture card-25 needs an article card with {title: 'Field notes', meta: 'June notes'}. The title, metadata, and interactive region need clear hierarchy.

What to check

Use {surface: 'card', titleRole: 'h3', metaRole: 'caption'} and existing spacing tokens. Check presentation with keyboard use and reduced motion.

Original SKILL.md on GitHub · Updated

Frequently asked question

Does a simple interaction transition need an animation library?

The guide starts with CSS for simple transitions. Use the existing animation capabilities for more complex sequences, gestures, or scroll-triggered behavior when needed.