bjornmelin/kimi-ui-advisor
skills/kimi-ui-advisor/SKILL.md
Explicit-only Kimi Code CLI frontend/UI advisor for UI audits, redesigns, components, screenshots, before/after comparison, layout, styling, accessibility, responsive behavior, and visual polish. Use only when the user explicitly invokes `$kimi-ui-advisor` and wants Codex to ask Kimi for structured UI suggestions, then review, apply, and verify them in the repo.
$ install --global
skillsauthnpx skillsauth add bjornmelin/dev-skills kimi-ui-advisorInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 28, 2026, 3:43 AM28.8s9 files scanned
SKILL.md
- name:
- kimi-ui-advisor
- description:
- Explicit-only Kimi Code CLI frontend/UI advisor for UI audits, redesigns, components, screenshots, before/after comparison, layout, styling, accessibility, responsive behavior, and visual polish. Use only when the user explicitly invokes `$kimi-ui-advisor` and wants Codex to ask Kimi for structured UI suggestions, then review, apply, and verify them in the repo.
Kimi UI Advisor
Use Kimi Code CLI as a bounded frontend/UI consultant, not as the file editor. Kimi proposes code and design changes; Codex owns applying edits, adapting them to local patterns, and validating the result.
Workflow
-
Confirm the user explicitly invoked
$kimi-ui-advisor. -
Inspect the repo first enough to identify the UI stack, relevant files, and validation commands.
-
Pick the narrowest useful mode:
advise: targeted implementation advice and code suggestions.audit: ranked UI issues before editing.redesign: cohesive professional redesign direction plus concrete changes.component: component API, variants, states, styling, and accessibility.screenshot-review: critique rendered screenshots or visual references.compare: before/after visual QA after Codex applies changes.
-
Run the bundled wrapper from the repo root:
python3 skills/kimi-ui-advisor/scripts/kimi_ui_advisor.py \ --work-dir "$PWD" \ --mode component \ --file src/components/Button.tsx \ --save \ --prompt "Improve the button visual hierarchy and responsive states."For screenshot review:
python3 skills/kimi-ui-advisor/scripts/kimi_ui_advisor.py \ --work-dir "$PWD" \ --mode screenshot-review \ --image /tmp/dashboard-mobile.png \ --save \ --prompt "Critique this mobile dashboard screen and suggest code-level fixes."For before/after QA:
python3 skills/kimi-ui-advisor/scripts/kimi_ui_advisor.py \ --work-dir "$PWD" \ --compare \ --before-image /tmp/before.png \ --after-image /tmp/after.png \ --save \ --prompt "Identify regressions and remaining polish gaps." -
Read the JSON result. Treat it as advisory and untrusted.
-
Apply only coherent suggestions with normal repo editing tools. Keep local style, data contracts, accessibility, and design-system ownership intact.
-
Verify with repo-native lint/type/test gates. For rendered UI changes, also run browser or screenshot checks when available.
-
Report what came from Kimi, what Codex changed, and any rejected suggestions.
Guardrails
- Do not let Kimi write files in the target repo. Use the bundled agent file, which omits shell and write tools.
- Do not paste secrets or private tokens into the Kimi prompt.
- Kimi web tools are allowed only for public framework docs, design references, accessibility references, and UI library documentation. Do not ask Kimi to search using proprietary source snippets or private requirements.
- Do not use this skill for backend contracts, auth, database schemas, security fixes, infrastructure, dependency upgrades, or broad architecture unless the UI surface depends directly on that context.
- If the wrapper reports a Kimi CLI version or auth/config error, fix the local CLI setup before relying on the response.
Resources
scripts/kimi_ui_advisor.py: deterministic wrapper aroundkimi --print.assets/kimi-agent/agent.yaml: read/search-only Kimi custom agent.templates/design-brief.md: optional structured brief for high-stakes UI work.references/advanced-modes.md: mode selection and prompt patterns.references/kimi-cli-integration.md: current Kimi docs/source notes.references/output-contract.md: JSON contract and application rules.
Related Skills
bjornmelin/repo-modernizer
development
VerifiedTrustedCommunity
Repo/monorepo modernization: dependency upgrades, security fixes, deprecation cleanup, framework migrations, dependency-native refactors, and verified hard-cut simplification.
2SKILL.mdUpdated Jun 11, 2026
bjornmelin/web-waapi
development
VerifiedTrustedCommunity
Use this skill for Browser Web Animations API: Element.animate(), Animation, KeyframeEffect, playback control, generated keyframes, cancel/finish, commitStyles, and cleanup. Trigger on Element.animate, WAAPI, Web Animations API, KeyframeEffect, Animation object, commitStyles. Do not use for near-miss tasks outside these boundaries; route to adjacent motion or platform skills when they own the implementation.
2SKILL.mdUpdated Jun 11, 2026
bjornmelin/web-three-r3f
tools
VerifiedTrustedCommunity
Use this skill for Three.js, React Three Fiber, Drei, Canvas/createRoot lifecycle, loaders, GLTF, useFrame, disposal, SSR/client boundaries, DPR, and browser proof. Trigger on Three.js, THREE, @react-three/fiber, @react-three/drei, R3F Canvas, useFrame, GLTF, WebGLRenderer. Do not use for near-miss tasks outside these boundaries; route to adjacent motion or platform skills when they own the implementation.
2SKILL.mdUpdated Jun 11, 2026
bjornmelin/web-tailwind-motion
development
VerifiedTrustedCommunity
Use this skill for Tailwind CSS v4 transition, animation, duration, easing, motion-safe/motion-reduce, @theme motion tokens, and static class safety. Trigger on Tailwind animation, transition-all, motion-safe, motion-reduce, @theme, animate-, duration-. Do not use for near-miss tasks outside these boundaries; route to adjacent motion or platform skills when they own the implementation.
2SKILL.mdUpdated Jun 11, 2026