aviralj02/interface-skills

aviralj02 のプロフィール

記録された最新のソース活動: 2026年10月22日 19:46

SkillsMP カタログ更新: 2026年10月26日 11:37

収集済み skills: 4

GitHub スター: 0
GitHub フォーク: 0

リポジトリの README

README の元ファイル：README.md

README の元ファイルを読む

README 全文を表示

# Interface Skills > Teach your agent the parts it skips. **[skills.heyaviral.com](https://skills.heyaviral.com)** — browse every skill, or install directly with `npx skills add aviralj02/interface-skills`. Small, focused agent skills by [Aviral Jain](https://heyaviral.com). Every skill installs on its own, so you can add only what your agent is missing, or take the whole set in one command. The first collection is **interface behavior**: four skills for building interfaces that hold up once people actually use them. They cover what agents most often skip: unfinished features, missing states, broken async actions, and motion that ignores reduced-motion settings. More collections, for work beyond interfaces, will join as they are written. Each skill is a `SKILL.md` file that follows the open [Agent Skills](https://agentskills.io) format. They work with Claude Code, Codex, Cursor, and any other agent that loads skills. You can also read them as checklists yourself. ## Why Agents and developers often ship interfaces that look finished in a screenshot but fall apart in real use. Common failures: - A request fails and the screen goes blank - A new user lands on an empty page with no way forward - A refetch wipes good data off the screen - A double-click creates two orders - A save fails silently and the user's input is gone - One click deletes a project with no undo Most UI skill collections focus on visual quality. These skills focus on behavior, and only on the parts agents reliably get wrong without help. ## The skills | Skill | What it produces | Use when | |---|---|---| | [`feature-completeness`](skills/feature-completeness/SKILL.md) | Scorecard across 8 paths + ranked gaps routed to other skills | "Is this done?" — **start here** | | [`interface-states`](skills/interface-states/SKILL.md) | State matrix + state model | Any surface that renders data | | [`async-interactions`](skills/async-interactions/SKILL.md) | Action spec per operation | Save, submit, upload, sync, search-as-you-type | | [`reduced-motion`](skills/reduced-motion/SKILL.md) | Motion inventory with a verified reduced behavior per item | Any animation, parallax, carousel, or page transition | ## How they compose ```text feature-completeness (what's missing?) ├── interface-states (every state of each surface) │ └── async-interactions (every action's lifecycle) └── reduced-motion (calm motion that never breaks) ``` Each skill works on its own. Their outputs use shared vocabulary (state matrix, action spec, error kinds), so the output of one skill can feed straight into the next. Gaps outside these four (focus, copy, mobile layout, unguarded deletes) get a concrete fix in the `feature-completeness` scorecard rather than a separate skill. ## Install ### Skills CLI (Claude Code, Cursor, Codex, Copilot, OpenCode, and more) ```bash # Install all skills into the current project npx skills add aviralj02/interface-skills # Install globally (available in every project) npx skills add aviralj02/interface-skills -g # Pick specific skills npx skills add aviralj02/interface-skills --skill interface-states feature-completeness # Target a specific agent npx skills add aviralj02/interface-skills -a claude-code # See what's in the pack without installing npx skills add aviralj02/interface-skills --list ``` To update later, run `npx skills update`. To uninstall, run `npx skills remove <skill-name>`. ### Claude Code plugin ```text /plugin marketplace add aviralj02/interface-skills /plugin install interface-skills@interface-skills ``` ### Manual ```bash git clone https://github.com/aviralj02/interface-skills.git cp -r interface-skills/skills/* ~/.claude/skills/ ``` Or copy individual folders from [`skills/`](skills/) into your agent's skills directory (`.claude/skills/` for a single project). ## Usage Ask for the outcome. The skill descriptions are written so agents load the right skill automatically: - "Is the export feature ready to ship?" → `feature-completeness` - "What states does this dashboard need?" → `interface-states` - "Users are creating duplicate orders" → `async-interactions` - "Make the animations respect reduced motion" → `reduced-motion` You can also name a skill directly: "Use interface-states on the billing page." ## Worked examples - [Why your dashboard feels incomplete](examples/dashboard.md) - [The states every data table needs](examples/tables.md) - [How to design async form submission properly](examples/forms.md) ## Works alongside These skills handle behavior. For visual craft, pair them with a visual skill collection. See [ui-skills.com](https://www.ui-skills.com/skills) for a catalog. ## Contributing See [CONTRIBUTING.md](CONTRIBUTING.md). Run `node scripts/validate.mjs` before opening a PR. ## Author Created by [Aviral Jain](https://github.com/aviralj02) · [heyaviral.com](https://heyaviral.com) ## License [MIT](LICENSE)

リポジトリの README を読み込んでいます…

投稿

すべて見る →

Aviral

@aviralj022026年10月23日 18:12 UTC

Skill公開の投稿UI に動きを付ける

投稿の要約 · 英語

reduced-motion catches and prevents prefers-reduced-motion fallback bugs, so animations, transitions and autoplay respect the motion preference instead of leaving content invisible.

元の投稿

Skill の詳細を見る · interface-skills/skills-reduced-motion

このリポジトリの skills

分類待ち

skill

職業分類

説明

更新

reduced-motion

未分類

Make every animation, transition, scroll effect, and autoplaying element respect prefers-reduced-motion, and prove that the reduced path still works — content visible, transitions finished, end events and timers resolved, focus and scroll correct. Inventories…

原文の言語: 英語

2026-10-22

async-interactions

未分類

Design the full lifecycle of user-triggered asynchronous actions — pending feedback, timing thresholds, double-submit prevention, race conditions and stale responses, optimistic updates with rollback, retry and idempotency, cancellation, long-running and…

原文の言語: 英語

2026-09-13

feature-completeness

未分類

Evaluate whether a feature is actually finished by walking it through eight paths — happy, error, empty, loading, permission, mobile, accessibility, and recovery — and produce a completeness scorecard with a prioritized gap list. Use before calling a feature…

原文の言語: 英語

2026-09-13

interface-states

未分類

Enumerate and design every state a UI surface can be in — initial, loading, empty, populated, partial, error, stale, offline, disabled, permission-denied — and produce a state matrix before or alongside implementation. Use when building or reviewing any page,…

原文の言語: 英語

2026-09-13

収集済み skill 4 件中 4 件を表示しています。

AI アシスタントでインストール

このプロンプトをコピーして、使用中の AI アシスタントに送ってください。

Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/aviralj02/interface-skills.