Niblet skill

---
name: niblet
description: Keep interface work anchored to the product it belongs to instead of a generic template. Sets a short design contract, builds from the components and tokens already in the codebase, covers the states a surface can actually reach, and closes by looking at the rendered result. Use when building, reworking, or assessing a web or native interface. Trigger with "niblet", "niblet skill", "niblet designer ui", or "niblet review". Skip backend, CLI, data, and infrastructure work, prose-only tasks, and questions the product's own design system already settles.
license: Apache-2.0
metadata:
  version: '0.5.3'
  author: 'Mohamed Elkholy (elkaix)'
  organization: 'PyModel'
  source: 'https://github.com/PyModel/niblet-skill-mcp'
  compatibility: 'Claude Code, Codex, Cursor, and GitHub Copilot, or any agent that can open repository files and call an MCP tool.'
  tags: 'interface-design, product-ui, design-contract, state-coverage, accessibility, native'
---

# Niblet

Build an interface that belongs to this product, not a generic template. [Niblet](https://niblet.pymodel.com) is an optional reference catalogue; this skill also works entirely from local product evidence without an MCP connection, account, script, or browser automation.

## Start here

1. Identify the requested surface, action, and scope. Read the product brief, relevant current screens, components, tokens, content, and platform constraints. Inspect the repository directly; this skill has no setup script.
2. Select the surface mode below and write a compact design contract in the conversation or the existing surface brief. Ask only for a consequential decision that the available product evidence cannot answer. Mark other assumptions.
3. Read [the command playbook](references/commands.md) for the requested command. The local MCP adapter registers each entry as `niblet-<command>`; a standalone filesystem installation invokes the same work instructions in ordinary language. For native work, also read [native guidance](references/native.md).
4. Work within the contract. Use existing components and tokens before introducing new ones. If a concrete visual question remains unresolved, follow [the evidence policy](references/evidence.md); reference retrieval is optional, never a prerequisite to useful work.
5. Cover the applicable states and run the bounded finish gate. Report the delivered scope, evidence actually inspected, and any specific verification limitation.

**Routing:** with no target or command, present a short context-aware menu and wait for a choice rather than making changes. An explicit command loads its playbook entry. Otherwise treat the request as ordinary design work. For a new surface or replacement visual world without product context, run `init` first; narrow refinements can proceed from the incumbent implementation. `craft` aliases ordinary new work; `teach` aliases `init`.

**Authority order:** the user's current requirements and product brief; established product behavior, content, components, and design system; native platform and accessibility constraints; this skill; external references. Aesthetic preferences never overrule product truth, accessibility, or functional requirements.

## Four modes

Choose by the job of each surface, not the repository's category. Different surfaces in one product may use different modes. Persist the choice only in that surface's brief when persistence is requested; do not impose a project-wide mode.

| Mode           | User's job                  | Design priority                                                            | Common surfaces                              |
| -------------- | --------------------------- | -------------------------------------------------------------------------- | -------------------------------------------- |
| **Persuade**   | Decide and act              | Make the proposition, evidence, trade-offs, and next action understandable | Marketing, pricing, acquisition              |
| **Operate**    | Complete a task             | Legible state, efficient controls, predictable navigation, and recovery    | Apps, dashboards, settings, native utilities |
| **Read**       | Understand                  | Comprehension, typography, reading rhythm, navigation, and useful examples | Documentation, articles, guides              |
| **Experience** | Engage with the work itself | Let the artifact lead; keep navigation and chrome subordinate but usable   | Portfolios, galleries, interactive work      |

Mode is a prioritization tool, not a visual preset. A pricing page still needs usable controls; a gallery still needs accessible navigation; an application can have character without obscuring its tasks.

## Design contract

Keep this short enough to guide implementation. Record: