skills.rest
howells
howellsCOMMUNITY
Explore all skills by this author →
Website𝕏@howellsGitHub

foundry

Transform brand intent into Tailwind v4 @theme tokens and UI identity rules.

2|Updated May 21, 2026
Search Tags:#brand identity#design tokens#oklch#tailwind v4#ui theming#typography system#ui identity rules
One-click install
npx skills add https://github.com/howells/skills --skill foundry-howells
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: foundry
Source: https://github.com/howells/skills/tree/main/foundry
Command: npx skills add https://github.com/howells/skills --skill foundry-howells

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The foundry skill turns vague brand intentions into a concrete Tailwind v4 identity system that teams can implement consistently across a product’s UI and docs.

Core Features & Use Cases

  • Create or revise brand identity systems with practical positioning, visual character, and implementable rules that avoid generic “mood board” output.
  • Define Tailwind v4 CSS-first tokens using @theme and OKLCH-aware color thinking for palette roles and UI-ready semantics.
  • Deliver UI implementation guidance for typography, surfaces, motion personality, and reusable component/interaction identity rules, plus optional updates to docs like docs/brand-system.md.

Quick Start

Use the foundry skill to create a Tailwind v4 brand identity system for a software product, including @theme OKLCH tokens, typography direction, and example utility-ready guidance.

Frequently Asked Questions about foundry

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

FAQPage Schema
How do I create a Tailwind v4 brand identity system from scratch?▼

Build a Tailwind v4 brand system by translating visual character into OKLCH-based @theme tokens and UI identity rules. This process outputs semantic color roles, typography direction, and motion personality guidelines to ensure consistent UI theming.

What are OKLCH color tokens and how do they work for UI theming?▼

OKLCH tokens define UI theming palettes within Tailwind v4 @theme blocks using the OKLCH color space. They map brand intent to semantic color roles, ensuring visually uniform and accessibility-aware palette generation for interfaces.

Can I use this approach to revise an existing brand identity for a software product?▼

Yes, you can revise an existing brand identity for software products. The process applies to brand review and revision, updating visual character, OKLCH tokens, and UI identity rules to generate refreshed brand-system documentation.

Does Tailwind v4 require CSS-first configuration for design tokens?▼

Tailwind v4 uses CSS-first configuration for design tokens via the @theme directive. This approach replaces JavaScript configs, enabling direct definition of OKLCH-based semantic token roles within CSS for brand identity systems.

What is the best way to document UI identity rules for a design system?▼

Document UI identity rules by generating a dedicated brand-system markdown file. This includes Tailwind v4 @theme OKLCH tokens, typography direction, and reusable component interaction guidance for consistent product implementation.

Related Skills

Explore More Design & Creative Skills→
kettleofketchupkettleofketchup

tailwind

Configure Tailwind CSS v4 themes using CSS-first directives.

Community
Intermediate
themewagonthemewagon
1

tailwind

Enforce Tailwind v4 design tokens by replacing hardcoded colors and inline styles.

Official
Advanced
mklozmkloz

tailwind-design-system

Implement Tailwind CSS v4 design systems with design tokens and theming.

Community
Intermediate
CrazySwamiCrazySwami
5

brand-guide

Generate HTML or Markdown brand guides documenting colors, typography, and responsive specs.

Community
Intermediate