←Leaderboard/Design/finesse-skill
Last commit on August 4, 2026·Created on June 22, 2026

mouse-lin/finesse-skill

“Gives each interface the design grammar its purpose actually requires.”
Combined rank
#442
across all skills
In Design
#47
category rank
Stars
814
+9.1% in last 7d
Forks
83
+5.1% in last 7d
Watchers
0
0 watchers in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

A web-interface craft system for brand sites, dense product screens, commerce flows, AI workbenches, and phone-only experiences. It routes each brief through the appropriate visual register, component density, mobile structure, and motion technique, with explicit checks against generic styling and unsuitable effects.

WHO IT'S FOR
Creative Frontend Engineers
building high-craft brand surfaces with WebGL
Product UI Designers
designing dense dashboards and admin panels
AI Interface Developers
creating AI workbenches and agent consoles
E-commerce Frontend Developers
optimizing product detail and checkout pages
Repository contents

4 skill files

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill collection

Follow the documented setup, then try a first task.

I’m using

Install the complete bundle with npx skills

Installs: Complete mouse-lin/finesse-skill bundle; the installer asks which agent to install into. · Every agent supported by npx skills

Before you start
  • npx must already be available.
  1. Run this terminal command. When prompted, select the agent into which the complete bundle should be installed.

    npx skills add https://github.com/mouse-lin/finesse-skill
skills/finesse-ui/SKILL.md ↗ · Checked Oct 18, 2026README.en.md ↗ · Checked Oct 18, 2026

Give it something to do.

Suggested first task

Plan a specialty-coffee landing page

Uses finesse-ui

  • Replace `<PROJECT_PATH>` with the target project's path.
  • Provide the roaster's name, audience, offer, brand preferences, and any available image assets.
Use the finesse-ui skill for a specialty coffee roaster landing page in <PROJECT_PATH>. Start with the Design Read only: state the register and soul, include the required `You'll see:` and `Images:` lines, identify two likely objections, and wait for my approval before writing code.
skills/finesse-ui/SKILL.md ↗ · Checked Oct 18, 2026README.en.md ↗ · Checked Oct 18, 2026
Suggested first task

Plan an operations dashboard

Uses finesse-ui

  • Replace `<PROJECT_PATH>` with the target project's path.
  • Provide the intended users, key metrics, principal business objects, common actions, and sample data fields.
Use the finesse-ui skill for an operations-team data dashboard in <PROJECT_PATH>. Start with the Design Read only: state the product register and soul, include the required `You'll see:` and `Images:` lines, identify two likely objections, and wait for my approval before writing code.
skills/finesse-ui/SKILL.md ↗ · Checked Oct 18, 2026README.en.md ↗ · Checked Oct 18, 2026
Suggested first task

Plan a budgeting-app mobile screen

Uses finesse-ui

  • Replace `<PROJECT_PATH>` with the target project's path.
  • Specify the screen's primary job, required financial information, main user action, and target phone context.
Use the finesse-ui skill for one primary budgeting-app phone screen in <PROJECT_PATH>. Start with the Design Read only: choose the underlying content register and wrap it in the h5 container, include the required `You'll see:` and `Images:` lines, identify two likely objections, and wait for my approval before writing code.
skills/finesse-ui/SKILL.md ↗ · Checked Oct 18, 2026README.en.md ↗ · Checked Oct 18, 2026