Skill 01 · First production agent
/kc-lms-portal-design
The first Claude Skill I shipped at KnowledgeCity — a complete design system encoded as an active tool. Covers two products (Learner Portal 2.1 and LMS Admin) plus a Custom mode that adapts Portal styles to client brand colors. Built so engineers can produce KC-compliant UI without a designer reviewing every screen.
What's inside
- Two complete product styles — Portal 2.1 (orange brand,
ki-* web components) and LMS Admin (white sidebar, lms-ui-kit-react)
- Custom brand mode — Portal layout + a derived token palette from any client primary color
- Foundation tokens — color, typography (Lato 14/16px), spacing (4px grid), border-radius, shadows
- Exact component specs — buttons, inputs, tabs, modals, tables, navigation, badges, tooltips, empty states
- Copy-paste layout shells — Portal single white card · LMS header + sidebar + content
- Mandatory pre-build protocol — checklist Claude must complete before writing a single line of code
- Cross-contamination guards — what's wrong when Portal and LMS specs get mixed (radius, font weight, sidebar color, page bg)
- RTL / Arabic localization rules and a zero-rule that locks all output text to English
Structure
SKILL.md — entry, pre-build protocol, rulesUI/ — Portal 2.1 foundations & ki-* component specsUX/ — flows, states, terminology, UI craftLMS/ — Admin Panel foundations, components, themingassets/ — logo SVG variants
Example usage
/kc-lms-portal-design
LMS — add a users list page with a searchable table,
status filter, bulk actions, and pagination.
Release & adoption
Released as v1.0 — stable, tested, and available to every engineer who works with skills. Already in active production use with consistently strong feedback. As KnowledgeCity moved to consolidate everything under one unified design system, my next task became merging the legacy product-specific systems into a single foundation — the work that became /kc-design-foundations (Skill 02).
Skill 02 · Universal design system
/kc-design-foundations
The foundation layer for KCDS — the unified design language across the entire KC ecosystem: 5 product categories and 20+ products. Encoded as a Claude Skill so the system stops living only in Figma libraries and starts working as an active tool. The piece of work I'm most proud of: it turns institutional design knowledge into something other teams can actually pick up and use, with or without a designer in the room.
What's inside
- Four-layer architecture — Shell → Archetype → Product brand identity → Foundations
- Five KC product categories, each with its own accent color
- Eleven zero-rules that override everything else
- Cross-cutting concerns — RTL, accessibility, responsive, theming, density
- Canonical reference HTML for full working pages
- Audit-and-refactor protocol for existing screens
- Production checklist that gates the output
- 15 UX principles + audience-language guide + per-product briefs
Structure
SKILL.md — entry, 11 zero-rules, reading order00-zero-rules/ — overrides everything01-foundations/ — tokens, typography, color, product accents02-cross-cutting/ — RTL · a11y · responsive · theming · density03-ux-principles/ — 15 principles + audience language04-product-context/ — per-product briefs & styles06-components/ — page-shell, archetypes, data-display, etc.08-canonical-references/ — full-page HTML specs (Pattern A · B · authoring · detail)assets/ — logo & staticREADME.md — version history, maintainer notes
Example usage
/kc-design-foundations
Build a Compliance Operations dashboard — Pattern B
admin shell, KC Comply category (slate accent),
sortable incidents table with status filter, working
mobile drawer and theme toggle.
Release & adoption
Released as v1.0.1 — the first stable release line, safe for production use across all KC products. Stable, tested, and available to every engineer who works with skills. Powers every new product surface at KC by encoding architecture (shell → archetype → product accent → foundations) as a single tool any engineer can invoke. This is the foundation layer the rest of the skill family is built on top of.
Skill 03 · Mobile counterpart
/kc-ds-mobile
The native-mobile counterpart to /kc-design-foundations. Translates the universal KCDS language into iOS and Android — what stays, what adapts, what's platform-owned. It doesn't replace HIG or Material; it aligns the KC brand with them so the experience stays consistent between web and native without breaking platform expectations.
What's inside
- Mobile foundations — type scales, color, safe-area handling, motion timing tuned for native
- Touch & gesture vocabulary — tap, long-press, swipe-to-reveal, swipe-to-dismiss, pull-to-refresh, pinch, drag — plus what KCDS deliberately doesn't ship
- Mobile UX rules — back semantics, navigation state preservation, modal vs. sheet vs. drawer, bottom-tab nav
- Per-product mobile context — workflow, audience, and surface-specific behavior
- Quality gate — mobile audit protocol and production checklist (touch targets, safe areas, dynamic type, reduced motion)
- Mobile shells — Pattern A/B/C adapted for native, with working hamburger drawers and bottom tab bars
- Native components — bottom sheet, modal, tab bar, nav rail, sticky save bar, etc., with iOS/Android variants
- Canonical full-screen references — copy-paste mobile screens with working interactivity
Structure
SKILL.md — entry, when to use vs. foundations01-foundations/ — mobile tokens & typography02-touch/ — touch targets & gesture vocabulary03-ux/ — mobile UX rules (back, nav, state)04-product-context/ — per-product mobile briefs05-quality/ — audit protocol · checklist06-shells/ — mobile shell patterns07-components/ — native components (iOS + Android)08-products/ — product-specific mobile specs09-canonical-references/ — full-screen mobile specsreferences/ — supplementary materialsREADME.md — version history, maintainer notes
Example usage
/kc-ds-mobile
Design the course detail screen for iOS — hero,
progress, lesson list, download action. Support
dynamic type, reduced motion, and safe-area insets.
Release & adoption
Released as v1.0 — stable, tested, and available to every engineer working on the mobile apps. Outputs follow the same KCDS language while respecting iOS and Android conventions out of the box, so web and native stay in sync without breaking platform expectations.