Claude MarketplacesSubmit
ihlamury avatar

Notion Ui Skills

ihlamury/design-skills

A solid reference for building Notion-style interfaces with all the specific values you'd otherwise have to hunt down in dev tools. Inter font, 4px grid system, that distinctive #97CAEE accent blue, and proper semantic color tokens for light mode. The typography scale is well documented (66px bold headings down to body text), and the interaction guidelines are pragmatic: use AlertDialog for destructive actions, animate only compositor properties, never block paste. It's opinionated in the right ways, like mandating 4.5:1 contrast ratios and respecting prefers-reduced-motion. Most useful when you want Notion's clean aesthetic without reverse-engineering their CSS or making it up as you go.

skills.sh installs
402
GitHub stars
105
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add ihlamury/design-skills --skill notion-ui-skills --agent claude-code

Installs into .claude/skills of the current project.

Files

Notion UI Skills

Opinionated constraints for building Notion-style interfaces with AI agents.

When to Apply

Reference these guidelines when:

  • Building light-mode interfaces
  • Creating Notion-inspired design systems
  • Implementing UIs with Inter font and 4px grid

Colors

  • SHOULD use light backgrounds for primary surfaces
  • MUST use #F6F6F6 as page background (surface-base)
  • MUST use #97CAEE for primary actions and focus states (accent)
  • SHOULD reduce color palette (currently 15 colors detected)
  • MUST maintain text contrast ratio of at least 4.5:1 for accessibility

Semantic Tokens

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/ihlamury/design-skills
Categories
Frontend Development, Design & UI/UX, Office & Documents
First seen
Jun 3, 2026

More from ihlamury/design-skills

All 10

Recommended

More Frontend Development
1nuxt avatarcontributingnuxt/uiGuide for contributing to Nuxt UI. Provides component structure patterns, Tailwind Variants theming, Vitest testing conventions, and MDC documentation guideline400skills.sh installs
2buildermethods avatarfrontend-designbuildermethods/design-osCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat394skills.sh installs
3bobmatnyc avatarvuebobmatnyc/claude-mpm-skillsVue 3 - Progressive JavaScript framework with Composition API, reactivity system, single-file components, Vite integration, TypeScript support390skills.sh installs
4syncfusion avatarsyncfusion-blazor-dataformsyncfusion/blazor-ui-components-skillsImplement Syncfusion Blazor DataForm component for creating dynamic, data-bound forms with validation and field management. Use this when building forms in Blaz382skills.sh installs
5syncfusion avatarsyncfusion-blazor-pivot-tablesyncfusion/blazor-ui-components-skillsUse this skill when users ask how to implement Syncfusion Pivot Table/PivotView in Blazor. Trigger for Blazor components, data binding, OLAP analysis, aggregati381skills.sh installs
6umbraco avatarumbraco-ufm-componentumbraco/umbraco-cms-backoffice-skillsImplement UFM (Umbraco Flavored Markdown) components in Umbraco backoffice using official docs381skills.sh installs