What is the nickture-interface skill?
The nickture-interface skill is a SKILL.md in nickture/skills with checkable rules for any digital interface. Your AI coding agent follows them when it edits layout, styles, components or animation, and reviews finished screens against them, including the signs of generated design.
The nickture-interface skill is a set of checkable rules for a web app, website, landing page, mobile layout, email or presentation. The agent follows the rules when it edits an interface and reviews finished work against them.
The skill text is written in Russian for now. The agent reads it as it is and replies in your language, so the skill works for an interface in any language.
What the rules cover
The rules sit in separate files, one per section: typography, color and tokens, space and shape, hierarchy, icons, forms, states, navigation, onboarding, components, mobile, charts, documents, email, accessibility, scrolling, motion, performance and slop.
Examples use Tailwind CSS v4 and components in the style of shadcn. A Tailwind utility class in brackets hints at the implementation, and the rule holds without it.
Quick pass and slop check
About forty rules marked ★ form the quick pass. They catch the most visible mistakes and are checked first on screen. A review limited to the quick pass happens only when someone asks for a fast pass.
The slop section lists signs of generated design, such as three columns with an icon in a colored circle, a blue to purple gradient, everything centered, a card around every block and emoji in place of icons.
Edits versus reviews
On an edit the agent reads the main file, the principles, the slop section and only the sections the change touches. Any other work on a finished project counts as a review and reads every rules file in full.
Who the nickture-interface skill is for
Best for
- Reviewing or auditing a screen, site, landing page or presentation against named rules.
- Editing layout, styles, components or animation with the matching rule sections loaded.
- Removing the signs of generated design from an interface.
How to install Nickture Interface Skill: Checkable UI Design Rules
npx skills add nickture/skillsRun the install command
Run
npx skills add nickture/skillsin your project. It asks which skills to install and into which agents.Install one skill
Add
--skill nickture-interface -gto install only this skill for all projects.Install as a plugin
Alternatively run
/plugin marketplace add nickture/skillsand then/plugin install nickture-skills@nickture.Call the skill
Type
/nickture-interfacein Claude Code or Cursor, or$nickture-interfacein Codex.
Check that it loaded
Ask your agent to check the checkout screen against nickture-interface. Expect it to read SKILL.md and the rules files and name the rule behind each finding.
Key features
- Checkable rulesEach rule has a short heading that states it and a description that explains what to check and gives an example.
- Quick passAbout forty rules marked ★ catch the most visible mistakes and are checked first on screen when time is short.
- Twenty one sectionsThe sections table links one rules file per topic, from principles and typography to motion, performance and slop.
- Slop sectionLists the signs of generated design, including everything centered, a card around every block and numbering like 01 / 02 / 03.
- Search script
bash "$S/scripts/search.sh" FOLDERsearches a project or a downloaded page, and each match is checked against the rule that labels the line. - Rendered checkA layout the agent builds is checked against the read sections and on a rendered screen from the running project.
- Component statesA new or changed component is checked on a temporary page or in Storybook with long text, one row and a thousand rows.
- Separate text runA finished project gets two runs, text first with nickture-text-ru and layout second with this skill, each in its own agent or session.
- Plan mode reviewIn plan mode the agent lists broken rules and proposes fixes, and changes files only after you approve the plan.
Frequently asked questions
What is the nickture-interface skill?
It is a SKILL.md in the nickture/skills repository that gives an AI coding agent checkable rules for any digital interface. The agent follows them when it edits layout, styles, components or animation, and reviews finished work against them. The skill text is in Russian and the agent replies in your language.
How do I install the nickture-interface skill?
Run npx skills add nickture/skills, then pick the skills and agents when the command asks. Add --skill nickture-interface -g to install only this skill for all projects. A Claude Code plugin install also works with /plugin marketplace add nickture/skills followed by /plugin install nickture-skills@nickture.
Does the skill only work for Russian interfaces?
No. The skill text is in Russian for now, but the agent reads it as it is and replies in your language, so it works for an interface in any language. The sibling skill nickture-text-ru in the same repository covers Russian text only.
What is the quick pass?
It is a list of about forty rules marked ★ that catch the most visible mistakes. They are checked first on screen. The review is limited to them only when someone asks for a fast pass, and every other review reads all the rules files.
How should I run a review with this skill?
Run it in plan mode so the agent reads the rules, lists the broken ones and proposes fixes, and changes files only after you approve. Use the strongest model you have, since a weaker model or low reasoning effort reads selectively and skips rules.
How does the skill search code?
The agent runs the search script with a project folder or a downloaded page, as in bash "$S/scripts/search.sh" FOLDER, where S is the skill folder. A match is not yet a violation, so each one is checked against the rule that labels its line.
Which signs of generated design does it look for?
The slop section lists them, including three columns with an icon in a colored circle, a blue to purple gradient, everything centered, a card around every block, a badge that repeats the heading, monospace type outside code and emoji in place of icons.
How do I call the skill by name?
A skill loads on its own when the task matches its description. To call it explicitly, type /nickture-interface in Claude Code and Cursor or $nickture-interface in Codex, for example with a request to run the quick pass on the pricing page.