Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Use this skill to generate well-branded interfaces and assets for Sprintable, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
npx claudepluginhub moonklabs/skills --plugin moonklabs-design-systemHow this skill is triggered — by the user, by Claude, or both
Slash command
/moonklabs-design-system:sprintable-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Read the README.md file within this skill, and explore the other available files.
README.mdassets/sprintable-logo-full.pngassets/sprintable-logo-square.pngcolors_and_type.csspreview/brand-icons.htmlpreview/brand-logo-full.htmlpreview/brand-logo-square.htmlpreview/color-borders.htmlpreview/color-brand.htmlpreview/color-status.htmlpreview/color-surfaces.htmlpreview/color-text.htmlpreview/components-badges.htmlpreview/components-buttons.htmlpreview/components-cards.htmlpreview/components-inputs.htmlpreview/components-menu.htmlpreview/spacing-elevation.htmlpreview/spacing-radii.htmlpreview/spacing-scale.htmlCreates p5.js generative art with seeded randomness, noise fields, and interactive parameter exploration. Use for algorithmic art, flow fields, or particle systems.
Share bugs, ideas, or general feedback.
Read the README.md file within this skill, and explore the other available files.
If creating visual artifacts (slides, mocks, throwaway prototypes, etc), copy assets out and create static HTML files for the user to view. If working on production code, you can copy assets and read the rules here to become an expert in designing with this brand.
If the user invokes this skill without any other guidance, ask them what they want to build or design, ask some questions, and act as an expert designer who outputs HTML artifacts or production code, depending on the need.
colors_and_type.css — all tokens (color, type, spacing, radii, shadows). Link it from any HTML artifact and use CSS variables (var(--fg-1), var(--brand-primary), etc).assets/ — logos (sprintable-logo-full.png, sprintable-logo-square.png). Never redraw.preview/ — small specimen cards for each token group; useful references.ui_kits/web/ and ui_kits/app/ — working React (JSX + Babel) components demonstrating the marketing site and the workspace. Copy individual components out as starting points.#08090a.font-feature-settings: "cv01", "ss03" globally. Without these features, it is not Sprintable's Inter.#f7f8f8, never pure white.#3385f8) is the only chromatic color — reserved for CTAs, links, active states, the logo mark. Never decorative.rgba(255,255,255,0.05–0.08)) on dark.