frontend-design-tailwind-css-custom-config
Sub-skill of frontend-design: Tailwind CSS (Custom Config) (+1).
Best use case
frontend-design-tailwind-css-custom-config is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Sub-skill of frontend-design: Tailwind CSS (Custom Config) (+1).
Teams using frontend-design-tailwind-css-custom-config should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/tailwind-css-custom-config/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How frontend-design-tailwind-css-custom-config Compares
| Feature / Agent | frontend-design-tailwind-css-custom-config | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Sub-skill of frontend-design: Tailwind CSS (Custom Config) (+1).
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Tailwind CSS (Custom Config) (+1)
## Tailwind CSS (Custom Config)
```javascript
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'display': ['Space Grotesk', 'sans-serif'],
'body': ['Spectral', 'serif'],
},
colors: {
'midnight': '#1a1a2e',
'navy': '#16213e',
'coral': '#e94560',
'ocean': '#0f3460',
},
animation: {
'fade-in': 'fadeIn 0.6s ease-out',
'slide-up': 'slideUp 0.6s ease-out',
},
},
},
}
```
## React Components
```jsx
const Button = ({ children, variant = 'primary', ...props }) => {
const baseStyles = `
px-6 py-3 font-display font-semibold
transition-all duration-300
focus:outline-none focus:ring-2 focus:ring-offset-2
`;
const variants = {
primary: 'bg-coral text-white hover:bg-opacity-90 focus:ring-coral',
secondary: 'bg-transparent border-2 border-coral text-coral hover:bg-coral hover:text-white',
ghost: 'bg-transparent text-coral hover:underline',
};
return (
<button className={`${baseStyles} ${variants[variant]}`} {...props}>
{children}
</button>
);
};
```Related Skills
toml-section-scoping-config-debug
Diagnose TOML config errors caused by misplaced keys in table sections
portable-config-baseline-pattern
Extract machine-agnostic settings into portable template files while keeping machine-specific hooks and plugins separate
portable-baseline-configuration-pattern
Separate portable/universal config from machine-specific settings to enable safe template reuse across environments
portable-baseline-config-pattern
Separate machine-portable baseline config from environment-specific hooks and plugins
itinerary-design
Use when constructing a day-by-day itinerary inside a trip plan. Encodes base-count rules, jet-lag handling, transit-day discipline, slack budgeting, and the "last day = travel only" rule. Invoked by the trip-planner skill.
orcaflex-environment-config
Configure OrcaFlex environmental conditions including wave spectra (JONSWAP, Dean Stream), current profiles, wind loading, and seabed properties for offshore analysis.
mooring-design
Design and analyze mooring systems including CALM and SALM buoys, catenary moorings, and spread mooring configurations. Covers mooring line design, safety factors, environmental loading, and compliance with DNV, API, and ABS standards.
hermes-config-audit-gotchas
Audit Hermes custom config keys and migrated skill settings safely, with verified command behavior and stale-path checks.
hermes-local-configuration
Class-level Hermes local configuration and setup workflows, including config audit gotchas and Windows installation.
cowork-plugin-customizer
Customize or personalize a Codex plugin for a specific organization's tools and workflows by replacing placeholders and configuring MCP servers.
touchdesigner-mcp
Control a running TouchDesigner instance via twozero MCP — create operators, set parameters, wire connections, execute Python, build real-time visuals. 36 native tools.
popular-web-designs
54 production-quality design systems extracted from real websites. Load a template to generate HTML/CSS that matches the visual identity of sites like Stripe, Linear, Vercel, Notion, Airbnb, and more. Each template includes colors, typography, components, layout rules, and ready-to-use CSS values.