From css-development-assistant
CSS fundamentals - selectors, specificity, box model, positioning, units
How this skill is triggered — by the user, by Claude, or both
Slash command
/css-development-assistant:skills/css-fundamentalsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Master core CSS concepts: selectors, specificity, box model, positioning, and units.
Master core CSS concepts: selectors, specificity, box model, positioning, and units.
This skill provides atomic, focused guidance on CSS fundamentals with type-safe parameters and comprehensive validation.
| Property | Value |
|---|---|
| Category | Core CSS |
| Complexity | Beginner to Intermediate |
| Dependencies | None |
| Bonded Agent | 01-css-fundamentals |
Skill("css-fundamentals")
parameters:
topic:
type: string
required: true
enum: [selectors, specificity, box-model, positioning, units, display]
description: The CSS fundamental topic to explore
level:
type: string
required: false
default: beginner
enum: [beginner, intermediate, advanced]
description: Depth of explanation
include_examples:
type: boolean
required: false
default: true
description: Include code examples
validation:
- rule: topic_required
message: "Topic parameter is required"
- rule: valid_enum
message: "Topic must be one of: selectors, specificity, box-model, positioning, units, display"
[attr], [attr=value]:hover, :focus, :nth-child()::before, ::after>, +, ~!important usage and pitfallsbox-sizing: border-box vs content-boxstatic, relative, absolute, fixed, stickyretry_config:
max_attempts: 3
backoff_type: exponential
initial_delay_ms: 1000
max_delay_ms: 10000
retryable_errors:
- TIMEOUT
- RATE_LIMIT
- TEMPORARY_FAILURE
logging:
entry_point: skill_invoked
exit_point: skill_completed
log_parameters: true
log_response_size: true
metrics:
- invocation_count
- success_rate
- avg_response_time
Inline styles → 1,0,0,0
ID selectors → 0,1,0,0
Classes/attrs → 0,0,1,0
Elements → 0,0,0,1
Example: div#header .nav a:hover
0,1,2,2 (ID=1, class+pseudo=2, elements=2)
┌─────────────────────────────────┐
│ MARGIN │
│ ┌─────────────────────────┐ │
│ │ BORDER │ │
│ │ ┌─────────────────┐ │ │
│ │ │ PADDING │ │ │
│ │ │ ┌─────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ └─────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └─────────────────────────┘ │
└─────────────────────────────────┘
| Use Case | Recommended Unit |
|---|---|
| Typography | rem |
| Spacing | rem or em |
| Borders | px |
| Viewport layouts | vh, vw, % |
| Container layouts | % or fr |
/* Efficient: Single class */
.nav-link { }
/* Less efficient: Descendant chain */
nav ul li a { }
/* Prefer attribute selectors */
[data-state="active"] { }
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
describe('CSS Fundamentals Skill', () => {
test('validates topic parameter', () => {
expect(() => skill({ topic: 'invalid' }))
.toThrow('Topic must be one of: selectors, specificity...');
});
test('returns selector examples for selectors topic', () => {
const result = skill({ topic: 'selectors', level: 'beginner' });
expect(result).toContain('.class');
expect(result).toContain('#id');
});
test('handles missing optional parameters', () => {
const result = skill({ topic: 'box-model' });
expect(result.level).toBe('beginner');
expect(result.include_examples).toBe(true);
});
});
| Error Code | Cause | Recovery |
|---|---|---|
| INVALID_TOPIC | Unknown topic | Show valid topics list |
| LEVEL_MISMATCH | Level too advanced for topic | Suggest appropriate level |
| PARAM_VALIDATION | Invalid parameter type | Return validation message |
npx claudepluginhub pluginagentmarketplace/custom-plugin-css --plugin css-assistantCSS conventions, layout systems, and modern patterns: predictable styles through low specificity and explicit cascade control. Invoke whenever task involves any interaction with CSS code — writing, reviewing, refactoring, debugging, or understanding stylesheets, SCSS, layout, or responsive design.
Teaches HTML tags and structure, CSS selectors/properties, browser rendering, and HTML/CSS/JS relationships using analogies and quizzes. Activates on .html/.css edits.