New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Frontend Artisan

by nekomangaorg in nekomangaorg/Neko

Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish.

Apache-2.0Auto-check passedFrontend & Design

Install Frontend Artisan

skills CLI
$ npx skills add nekomangaorg/Neko --skill frontend-artisan -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nekomangaorg/Neko frontend-artisan --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nekomangaorg/Neko.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/artisan .claude/skills/frontend-artisan && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
frontend-artisan
GitHub stars
2.8k
Token cost
~1.1k tokens
SKILL.md length
547 words
Files
2
Skills in repo
15
Repo updated
First seen
Licence
Apache-2.0

At a glance

Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish.

  • Works in 5 steps: OBSERVE: Look for frontend opportunities → SELECT & PROPOSE: Pick the BEST… → CRAFT (Upon Approval): Implement with… → …
  • Extract hardcoded styles to AppTheme
  • SKILL.md covers ✅ Always do:, ⚠️ Ask first: and 🚫 Never do:
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Frontend Artisan is an agent skill from nekomangaorg/Neko. Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish. Use this skill to extract hardcoded styles to AppTheme, add TalkBack semantics, implement AnimatedVisibility or micro-animations, extract stateless Composables, and add @Preview annotations.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `journal.md`).

It sits in Frontend & Design, covering Accessibility and Android development. It works with Laravel and Jetpack Compose. The repository describes itself as: Unofficial MangaDex Reader for Android 8+. The licence is Apache-2.0.

When your agent uses it

  • Extract hardcoded styles to AppTheme
  • Add TalkBack semantics
  • Implement AnimatedVisibility
  • Micro-animations

Example prompts

  • “Use the frontend-artisan skill to elevate the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes…”
  • “/frontend-artisan”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. OBSERVE: Look for frontend opportunities
  2. SELECT & PROPOSE: Pick the BEST opportunity that has immediate, visible impact on the frontend while remaining strictly cosmetic or…
  3. CRAFT (Upon Approval): Implement with care. Write semantic, accessible Compose code using existing design system tokens. Extract complex…
  4. VERIFY: Run ./gradlew ktfmtFormat to format the new UI code. Verify @Previews render correctly. Run existing UI tests and format checks.
  5. PRESENT: Create a PR using Conventional Commits with the feat: (UI addition), fix: (A11y/UI fix), or ref: (UI extraction/cleanup) prefix…

What it can do on your machine

Read from SKILL.md and the folder at commit e52cc82. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Frontend Artisan loads about 1.1k tokens when it runs. Until then it costs about 87 tokens; SKILL.md has 547 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~87
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nekomangaorg/Neko at commit e52cc82, republished under its Apache-2.0 licence (© nekomangaorg). 547 words, ~1,132 tokens.

Download SKILL.mdSave it as .claude/skills/frontend-artisan/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
frontend-artisan
description
Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish. Use this skill to extract hardcoded styles to AppTheme, add TalkBack semantics, implement AnimatedVisibility or micro-animations, extract stateless Composables, and add @Preview annotations.

Goal

You are "The Artisan" 🎨 - a comprehensive frontend polish agent who elevates the user interface. Your mission is to find and implement ONE micro-UX improvement, animation, accessibility fix, or UI cleanup that makes the Jetpack Compose layer more intuitive and maintainable.

Philosophy:

  • Good UX is invisible; it just works.
  • Accessibility is not an afterthought; it is a requirement.
  • Motion provides context.
  • Keep Composables small, focused, and previewable.

Journaling Rules (Read .agents/skills/artisan/journal.md before starting and write learnings to it): Your journal is NOT a log - only add entries for CRITICAL frontend learnings. Format as ## YYYY-MM-DD - [Title] \n **Learning:** [Insight] \n **Action:** [How to apply next time]. Ensure the date is the exact date of the run. ONLY log things like: a custom Compose Modifier the team prefers for standardizing touch targets, the specific tween or spring specifications this design system prefers, or a Compose component that breaks when animateContentSize is applied. DO NOT journal routine work like "Added contentDescription" or generic Material Design guidelines.

Constraints

✅ Always do:

  • Explain what was identified (component, current UI/UX/A11y issue) and the proposed action plan, then wait for user approval before making any code modifications.
  • Run ./gradlew ktfmtFormat before creating a PR to ensure Compose DSL remains clean.
  • Run ./gradlew lintDebug and ./gradlew testDebugUnitTest before creating a PR.
  • Add contentDescription or Modifier.semantics for TalkBack support.
  • Extract hardcoded colors/dimensions to the central AppTheme.
  • Add @Preview annotations to newly extracted, stateless components.
  • Keep changes under 100 lines.

⚠️ Ask first:

  • Major design changes that alter the layout of a screen.
  • Adding new design tokens to the core AppTheme.

🚫 Never do:

  • Add new third-party UI libraries (e.g., Lottie) without permission.
  • Change ViewModel business logic or state flows.
  • Animate elements that block the user from interacting with the app.
  • Never use the prefix refactor: in PR titles or commits. Use feat:, fix:, or ref: instead.
Show full SKILL.md (243 more words)Show less

Instructions

  1. OBSERVE: Look for frontend opportunities:
  • A11y: Missing descriptions, small touch targets (< 48.dp), poor color contrast.
  • Styling: Hardcoded 0xFF... colors or 16.dp padding instead of theme references.
  • Motion: Instant UI swaps that should use AnimatedVisibility or animateColorAsState.
  • Structure: Column or Box blocks nested > 4 levels deep that should be extracted.
  • Tooling: Reusable Composables missing a PreviewParameterProvider or @Preview.
  1. SELECT & PROPOSE: Pick the BEST opportunity that has immediate, visible impact on the frontend while remaining strictly cosmetic or structural. Explain what was identified and describe the planned UI/UX improvements. Wait for user approval before proceeding with implementation.
  2. CRAFT (Upon Approval): Implement with care. Write semantic, accessible Compose code using existing design system tokens. Extract complex inline UI into private, stateless Composables. Apply smooth micro-animations where state changes abruptly.
  3. VERIFY: Run ./gradlew ktfmtFormat to format the new UI code. Verify @Previews render correctly. Run existing UI tests and format checks.
  4. PRESENT: Create a PR using Conventional Commits with the feat: (UI addition), fix: (A11y/UI fix), or ref: (UI extraction/cleanup) prefix. Example: feat: add fade transition to Library item selection. Include What, Why, and visual/accessibility impacts in the description.

Examples

  • Replacing an instant boolean visibility toggle with AnimatedVisibility(enter = fadeIn(), exit = fadeOut()).
  • Extracting a deeply nested 5-level Column into a standalone, stateless Composable with a @Preview.
  • Replacing hardcoded 16.dp and custom hex colors with MaterialTheme.spacing.medium and MaterialTheme.colors.primary.
  • Expanding minimum touch target sizes to 48.dp and adding contentDescription to an accessible icon button.

© nekomangaorg, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in .agents/skills/artisan of nekomangaorg/Neko.

  • SKILL.md
  • journal.md

Open the folder on GitHubat commit e52cc82

Compare with similar skills

Frontend Artisan next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Frontend Artisan compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Frontend Artisan this skillnekomangaorg/Neko2.8k—~1.1kAutomated safety check: PassApache-2.0
Android AccessibilityMoustachauve/WLED-Android1693 repos~471Automated safety check: PassApache-2.0
Levyra ComposeLUC4N3X/Levyra-deepsound590—~2.2kAutomated safety check: PassGPL-3.0
Configuring Test Dependenciesskydoves/android-testing-skills334—~4.1kAutomated safety check: PassApache-2.0
Setting Up Host Vs Device Testsskydoves/android-testing-skills334—~4.8kAutomated safety check: PassApache-2.0
Material 3hamen/material-3-skill1.5k2 repos~7.8kAutomated safety check: PassMIT

Similar skills

  • Android Accessibility

    Moustachauve/WLED-Android

    Expert checklist and prompts for auditing and fixing Android accessibility issues, especially in Jetpack Compose.

    169 GitHub starsUsed in 3 repos~471 tokens
    Frontend & DesignAuto-check passed

  • Levyra Compose

    LUC4N3X/Levyra-deepsound

    Implement, debug, or review Levyra Jetpack Compose screens, state projections, navigation, animation, lifecycle, accessibility, performance, RTL, localization, edge-to-edge, adaptive layout, and…

    590 GitHub stars~2.2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Configuring Test Dependencies

    skydoves/android-testing-skills

    A skill your agent uses to wire the correct Gradle dependency matrix for Jetpack Compose UI tests.

    334 GitHub stars~4.1k tokensUpdated 4 mo ago
    MobileAuto-check passed

  • Setting Up Host Vs Device Tests

    skydoves/android-testing-skills

    A skill your agent uses to choose between host (Robolectric/JVM) and device (instrumentation) tests for Jetpack Compose, and to configure each correctly.

    334 GitHub stars~4.8k tokensUpdated 4 mo ago
    MobileAuto-check passed

  • Material 3

    hamen/material-3-skill

    Implement Google's Material Design 3 (Material You) UI system.

    1.5k GitHub starsUsed in 2 repos~7.8k tokens
    Frontend & DesignAuto-check passed

  • React Aria

    intentui/laravel

    Build accessible UI components with React Aria Components. An agent skill from intentui/laravel.

    162 GitHub starsUsed in 1 repo~3.9k tokens
    Frontend & DesignAuto-check passed

More from nekomangaorg/Neko

All 15 skills in this repo

  • Architecture Overclock

    nekomangaorg/Neko

    Resolves deep, structural performance bottlenecks in the Kotlin Android codebase.

    2.8k GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Architecture Renovator

    nekomangaorg/Neko

    Resolves deep architectural debt in the Kotlin Android codebase through macro-level refactoring.

    2.8k GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Build Foreman

    nekomangaorg/Neko

    Optimizes Gradle build scripts, compilation times, and Android Studio sync performance.

    2.8k GitHub stars~807 tokensUpdated yesterday
    Auto-check passed

  • Code Steward

    nekomangaorg/Neko

    Maintains Kotlin codebase health, idiomatic style, and modern API usage.

    2.8k GitHub stars~977 tokensUpdated yesterday
    Auto-check passed

  • Domain Distiller

    nekomangaorg/Neko

    Extracts duplicated or tangled business logic from ViewModels, Repositories, or UI components into pure, highly testable Kotlin Use Cases (Interactors) following the Single Responsibility Principle.

    2.8k GitHub stars~1k tokensUpdated yesterday
    Auto-check passed

  • Frontend Maestro

    nekomangaorg/Neko

    Orchestrates macro-level UI architecture, complex Jetpack Compose structures, and screen-to-screen flows.

    2.8k GitHub stars~1.3k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Frontend Artisan

What does Frontend Artisan do?

Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish. Frontend Artisan is an agent skill from nekomangaorg/Neko. Elevates the Jetpack Compose user interface through micro-UX improvements, animations, accessibility (a11y) fixes, and UI structural polish.

When should I use Frontend Artisan?

Frontend Artisan fits situations like: extract hardcoded styles to AppTheme; add TalkBack semantics; implement AnimatedVisibility; micro-animations.

How do I install Frontend Artisan in Claude Code?

Run `npx skills add nekomangaorg/Neko --skill frontend-artisan -a claude-code`. Or copy the skill folder (.agents/skills/artisan in nekomangaorg/Neko) into .claude/skills/frontend-artisan in your project. Claude Code loads it when a task matches its description.

How do I install Frontend Artisan in Codex?

Run `npx skills add nekomangaorg/Neko --skill frontend-artisan -a codex`. Or copy the skill folder (.agents/skills/artisan in nekomangaorg/Neko) into .agents/skills/frontend-artisan in your project. Codex loads it when a task matches its description.

Can I use Frontend Artisan in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nekomangaorg/Neko --skill frontend-artisan -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/frontend-artisan, .gemini/skills/frontend-artisan, .github/skills/frontend-artisan and .opencode/skills/frontend-artisan in your project.

What does Frontend Artisan need to run?

SKILL.md names no scripts, command-line tools or credentials: Frontend Artisan is instructions for the agent only.

Does Frontend Artisan access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Frontend Artisan safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Frontend Artisan use?

Frontend Artisan is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Frontend Artisan use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Frontend Artisan?

Skills that share tags, products or a category with Frontend Artisan: Android Accessibility (Moustachauve/WLED-Android, 169 stars), Levyra Compose (LUC4N3X/Levyra-deepsound, 590 stars), Configuring Test Dependencies (skydoves/android-testing-skills, 334 stars) and Setting Up Host Vs Device Tests (skydoves/android-testing-skills, 334 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Frontend Artisan?

nekomangaorg (a GitHub organization) maintains it in nekomangaorg/Neko, which has 2,812 GitHub stars. The repository holds 15 skills in this directory. The repository was last updated on October 9, 2026.

Source: nekomangaorg/Neko on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.