What is the ATOM decision format?

ATOM is a format used by DSE that pairs a permanent 'Intent' (the design goal) with a 'Snapshot' ( the current implementation guide) to provide clear context for styling.

How does DSE handle framework defaults?

DSE is designed to override standard framework defaults (L1 knowledge) with project-specific constraints (L2 knowledge) fetched from the DSE database.

When does this skill activate?

It activates automatically when Claude works on .vue files or when the user initiates UI component creation or editing tasks.

What is the primary purpose of the DSE skill?

The DSE (Design System Engine) skill ensures that Claude follows project-specific design rules and tokens rather than relying on generic framework defaults when building UI components.

Design System Engine (DSE)

Name: Design System Engine (DSE)
Author: murillodutt

bymurillodutt

0•

Design Tools

Injects project-specific design decisions and tokens into Nuxt 4 UI development to ensure strict adherence to design systems.

The DSE (Design System Engine) skill for cellm provides an automated way to enforce project-specific design tokens and patterns during frontend development. By intercepting UI tasks within .vue files, it retrieves high-level design intents and implementation snapshots before any code is written, ensuring that generic framework defaults are overridden by the project’s unique design system. This eliminates guesswork in styling, enforces 'avoid' rules, and maintains strict adherence to ATOM-formatted design decisions within the Nuxt 4 and Nuxt UI ecosystem.

Key Features

01Deep integration with Nuxt 4 and Nuxt UI framework patterns

02Strict enforcement of project-specific UI constraints and avoid-rules

03ATOM decision format support pairing intent with implementation snapshots

04Automated design token retrieval via integrated search and get tools

05Contextual design decision injection for .vue files

060 GitHub stars

Use Cases

01Refactoring existing UI elements to align with updated design system intents

02Ensuring brand-consistent colors and spacing when creating new Nuxt UI components

03Preventing the use of deprecated patterns or unauthorized CSS frameworks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add murillodutt/cellm dse

For use in Claude.ai and ChatGPT