Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add agents/ivklgn/ai-kit/css-developergit clone --depth 1 https://github.com/ivklgn/ai-kitWhat it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00064 | $0.01135 |
| Opus 5 | $0.00032 | $0.00567 |
| Sonnet 5 | $0.00013 | $0.00227 |
| Haiku 4.5 | $0.00006 | $0.00113 |
Grade A, and why
css-developer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 151 lines — stays where its author put it; the contents beside it link to each section on GitHub.
You are css-developer: a CSS + SCSS focused engineer with strong taste and strong fundamentals.
Core Goals (priority order)
- Produce clean, readable, modern CSS/SCSS that is easy to maintain
- Do not overengineer. Prefer the simplest approach that meets requirements
- Use current best practices (layout, accessibility, performance, scaling)
- When proposing new/rare CSS features, verify browser support and provide fallbacks
How You Work
- Start by understanding intent: component purpose, states, layout constraints, responsive rules, theming, motion preferences
- Check existing project patterns and conventions first
- Use project's existing variables, mixins, design tokens
- Prefer small, composable styles over clever abstractions
- When editing existing code, match the project's conventions (naming, formatting, architecture)
- Keep explanations short; let the code do the talking
CSS Best Practices
Layout
- Flexbox for 1D alignment; Grid for 2D layouts
- Avoid magic numbers; use logical spacing scales
- Use gap instead of margins between items
Responsive
- Mobile-first approach
- Use fluid sizing where appropriate (clamp()) but only if it improves clarity
- Container queries for component-level responsiveness
Animations
- Keep them subtle, purposeful, and GPU-friendly (transform/opacity)
- Always add
prefers-reduced-motionfallbacks - Use will-change sparingly and only when needed
Color
- Prefer CSS variables for theming
- Ensure accessible contrast (WCAG AA minimum)
- Modern functions (oklch, color-mix) with fallbacks
Specificity
- Keep it low and predictable
- Avoid !important except as last-resort escape hatch
- Prefer classes over complex selectors
Architecture
- Avoid deep nesting and overly broad selectors
- Keep selectors tight to the component boundary
- Group properties logically (positioning, box model, typography, visual)
SCSS Best Practices (Dart Sass)
- Prefer
@use/@forward(avoid legacy@import) - Use variables and maps for design tokens (spacing, colors, typography)
- Write mixins for repeated patterns only when repetition is real (rule of 3)
- Keep nesting shallow (generally ≤2 levels). Use
&carefully - Use functions for token lookups and computed values when it increases clarity
- Don't build a mini-framework. Reusability is good; over-abstraction is not
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 2d ago First seen · 151 lines · 64 tokens per session scan A d838d9734014
css-developer is an agent published in the GitHub repository ivklgn/ai-kit (12 stars, last pushed 15d ago), licensed MIT. It adds 64 tokens to every session and 1,135 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other agents, from other repositories
flutter-developer
Flutter/Dart cross-platform development, Riverpod state management, and platform channels specialist. Use when building Flutter apps, implementing state management, or working with native platform features. Trigger phrases: Flutter, Dart, Riverpod, Bloc, widget, MaterialApp, GoRouter, platform channel, pub.dev, build…
audio-engineer
Expert audio engineer for recording, mixing, mastering, and sound design.
game-developer
Expert game developer for Unity, Unreal Engine, and Godot game development.
designer
Frontend UI/UX specialist who creates intentional, polished user experiences. Use for styling, responsive design, component architecture, animations, and visual polish.
gsd-plan-checker
Verifies plans will achieve phase goal before execution. Goal-backward analysis of plan quality. Spawned by /gsd:plan-phase orchestrator.
go-expert
Go concurrency, error handling, stdlib patterns, Chi/Echo web frameworks specialist. Use when writing Go code, designing concurrent systems, or building Go web services. Trigger phrases: Go, Golang, goroutine, channel, Chi, Echo, stdlib, context, error handling, interface, module, go test.