design-ui
Design, implement, and critique IBM Design Language and Carbon interfaces. Use for IBM/Carbon product UI, IBM Plex, layout and typography, component or flow selection, semantic color and approved brand integration, accessibility, and interaction refinement.
Pinned to revision 60a4ed08496e, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/design-ui/SKILL.md
- skills/design-ui/assets/carbon-components.css
- skills/design-ui/assets/carbon-tokens.css
- skills/design-ui/assets/casebook/casebook.css
- skills/design-ui/assets/casebook/cases.js
- skills/design-ui/assets/casebook/cases.json
- skills/design-ui/assets/casebook/font-sources.json
- skills/design-ui/assets/casebook/fonts/IBMPlexSans-Regular.woff2
- skills/design-ui/assets/casebook/fonts/IBMPlexSans-SemiBold.woff2
- skills/design-ui/assets/casebook/fonts/license.txt
- skills/design-ui/assets/casebook/index.html
- skills/design-ui/assets/casebook/screens/dashboard-after-g100-desktop.png
- skills/design-ui/assets/casebook/screens/dashboard-after-g100-mobile.png
- skills/design-ui/assets/casebook/screens/dashboard-after-white-desktop.png
- skills/design-ui/assets/casebook/screens/dashboard-after-white-mobile.png
- skills/design-ui/assets/casebook/screens/dashboard-before-g100-desktop.png
- skills/design-ui/assets/casebook/screens/dashboard-before-g100-mobile.png
- skills/design-ui/assets/casebook/screens/dashboard-before-white-desktop.png
- skills/design-ui/assets/casebook/screens/dashboard-before-white-mobile.png
- skills/design-ui/assets/casebook/screens/expressive-after-g100-desktop.png
- skills/design-ui/assets/casebook/screens/expressive-after-g100-mobile.png
- skills/design-ui/assets/casebook/screens/expressive-after-white-desktop.png
- skills/design-ui/assets/casebook/screens/expressive-after-white-mobile.png
- skills/design-ui/assets/casebook/screens/expressive-before-g100-desktop.png
- skills/design-ui/assets/casebook/screens/expressive-before-g100-mobile.png
- skills/design-ui/assets/casebook/screens/expressive-before-white-desktop.png
- skills/design-ui/assets/casebook/screens/expressive-before-white-mobile.png
- skills/design-ui/assets/casebook/screens/form-after-g100-desktop.png
- skills/design-ui/assets/casebook/screens/form-after-g100-mobile.png
- skills/design-ui/assets/casebook/screens/form-after-white-desktop.png
- skills/design-ui/assets/casebook/screens/form-after-white-mobile.png
- skills/design-ui/assets/casebook/screens/form-before-g100-desktop.png
- skills/design-ui/assets/casebook/screens/form-before-g100-mobile.png
- skills/design-ui/assets/casebook/screens/form-before-white-desktop.png
- skills/design-ui/assets/casebook/screens/form-before-white-mobile.png
- skills/design-ui/assets/casebook/screens/settings-after-g100-desktop.png
- skills/design-ui/assets/casebook/screens/settings-after-g100-mobile.png
- skills/design-ui/assets/casebook/screens/settings-after-white-desktop.png
- skills/design-ui/assets/casebook/screens/settings-after-white-mobile.png
- skills/design-ui/assets/casebook/screens/settings-before-g100-desktop.png
- skills/design-ui/assets/casebook/screens/settings-before-g100-mobile.png
- skills/design-ui/assets/casebook/screens/settings-before-white-desktop.png
- skills/design-ui/assets/casebook/screens/settings-before-white-mobile.png
- skills/design-ui/assets/casebook/screens/table-after-g100-desktop.png
- skills/design-ui/assets/casebook/screens/table-after-g100-mobile.png
- skills/design-ui/assets/casebook/screens/table-after-white-desktop.png
- skills/design-ui/assets/casebook/screens/table-after-white-mobile.png
- skills/design-ui/assets/casebook/screens/table-before-g100-desktop.png
- skills/design-ui/assets/casebook/screens/table-before-g100-mobile.png
- skills/design-ui/assets/casebook/screens/table-before-white-desktop.png
- skills/design-ui/assets/casebook/screens/table-before-white-mobile.png
- skills/design-ui/assets/casebook/studies/dashboard-after.html
- skills/design-ui/assets/casebook/studies/dashboard-before.html
- skills/design-ui/assets/casebook/studies/expressive-after.html
- skills/design-ui/assets/casebook/studies/expressive-before.html
- skills/design-ui/assets/casebook/studies/form-after.html
- skills/design-ui/assets/casebook/studies/form-before.html
- skills/design-ui/assets/casebook/studies/settings-after.html
- skills/design-ui/assets/casebook/studies/settings-before.html
- skills/design-ui/assets/casebook/studies/table-after.html
- skills/design-ui/assets/casebook/studies/table-before.html
- skills/design-ui/assets/casebook/viewer.js
- skills/design-ui/assets/nextjs-shell/GlobalHeader.tsx
- skills/design-ui/assets/nextjs-shell/navigation.ts
- skills/design-ui/assets/nextjs-shell/shell.scss
- skills/design-ui/evals-intake.json
- skills/design-ui/evals-pattern-shell.json
- skills/design-ui/evals.json
- skills/design-ui/references/2x-grid.md
- skills/design-ui/references/accessibility.md
- skills/design-ui/references/action-feedback-and-links.md
- skills/design-ui/references/ai-explainability.md
- skills/design-ui/references/angular-tutorial-integration.md
- skills/design-ui/references/artifact-intake.md
- skills/design-ui/references/asset-scope.md
- skills/design-ui/references/carbon-next.md
- skills/design-ui/references/casebook/dashboard.md
- skills/design-ui/references/casebook/expressive.md
- skills/design-ui/references/casebook/form.md
- skills/design-ui/references/casebook/settings.md
- skills/design-ui/references/casebook/table.md
- skills/design-ui/references/chart-behavior.md
- skills/design-ui/references/chart-example-integration.md
- skills/design-ui/references/color-and-brand.md
- skills/design-ui/references/community-flows.md
- skills/design-ui/references/components-preview-coverage.md
- skills/design-ui/references/components-preview-index.md
- skills/design-ui/references/components-preview.md
- skills/design-ui/references/composition.md
- skills/design-ui/references/content-design.md
- skills/design-ui/references/core-interaction-contracts.md
- skills/design-ui/references/date-and-time.md
- skills/design-ui/references/design-engineering.md
- skills/design-ui/references/documentation-intake.md
- skills/design-ui/references/dynamic-svg-libraries.md
- skills/design-ui/references/evaluation-history.md
- skills/design-ui/references/evaluation.md
- skills/design-ui/references/fluid-styles.md
- skills/design-ui/references/forms-and-upload.md
- skills/design-ui/references/framework-integration.md
- skills/design-ui/references/icons-and-pictograms.md
- skills/design-ui/references/mcp-result-validation.md
- skills/design-ui/references/menus-and-triggers.md
- skills/design-ui/references/motion.md
- skills/design-ui/references/nextjs-shell.md
- skills/design-ui/references/pattern-selection.md
- skills/design-ui/references/patterns-coverage.md
- skills/design-ui/references/patterns.md
- skills/design-ui/references/practical-implementation-review.md
- skills/design-ui/references/react-tutorial-integration.md
- skills/design-ui/references/release-gate-definitions/README.md
- skills/design-ui/references/release-gate-definitions/behavior-fixture/src/dom.ts
- skills/design-ui/references/release-gate-definitions/behavior-fixture/src/driver.ts
- skills/design-ui/references/release-gate-definitions/behavior-fixture/src/sequence.ts
- skills/design-ui/references/release-gate-definitions/behavior-fixture/tests/behavior.spec.ts
- skills/design-ui/references/release-gate-definitions/release-fixture/src/checks.ts
- skills/design-ui/references/release-gate-definitions/release-fixture/tests/release.spec.ts
- skills/design-ui/references/release-gates.md
- skills/design-ui/references/selection-controls.md
- skills/design-ui/references/semantic-token-example.md
- skills/design-ui/references/senior-workflow.md
- skills/design-ui/references/source-map.json
- skills/design-ui/references/spacing.md
- skills/design-ui/references/spatial-workspaces.md
- skills/design-ui/references/status-and-dataviz.md
- skills/design-ui/references/taste.md
- skills/design-ui/references/themes.md
- skills/design-ui/references/tokens.md
- skills/design-ui/references/typeface-coverage.md
- skills/design-ui/references/typeface.md
- skills/design-ui/references/typography.md
- skills/design-ui/references/ui-shell.md
- skills/design-ui/references/visual-casebook.md
- skills/design-ui/references/vue-tutorial-integration.md
- skills/design-ui/references/web-components-tutorial-integration.md
- skills/design-ui/scripts/check_contrast.py
- skills/design-ui/scripts/evaluate.py
- skills/design-ui/scripts/fixtures/evaluation-contracts.json
- skills/design-ui/scripts/run_evals.ps1
- skills/design-ui/scripts/test_evaluate.py
Every link opens the file at its source, pinned to the revision this page describes.