Musicbrowser — Development skill for Claude Code
A front-end training tool and skills assessment.
How to install Musicbrowser
This entry records only its repository, not the path inside it, so there is no
exact command to give. Open AllThingsSmitty/musicbrowser and copy the folder into
~/.claude/skills/, or the file into ~/.claude/agents/.
What Musicbrowser does
A front-end training tool and skills assessment.
Alternatives in Development
- End To End Feature 348 ★
- Discussion Follow Up.V1 — At the end of your response, provide 3-4 numbered candidate next 272 ★
- Nonstop — Autonomous work mode for Claude Code 263 ★
README
Music Browser
The Brief
Music Browser is a fictional music discovery and news platform aimed at music enthusiasts. The "website" is intended to allow users to view articles on new music, discover emerging artists and view trending songs curated by users.
Instructions
This repo is intended as a training tool and skills assessment that mimics a typical workflow. Provided are PSDs for mobile and desktop. You will be expected to use these to build a responsive page, utilizing HTML5, CSS3 (Sass) and JavaScript.
Requirements
- You may use Modernizr and/or Selectivizr, but other libraries (jQuery), frameworks (Backbone.js/AngularJS), or plugins are not permitted.
- You are encouraged to use CSS preprocessors like Sass, but it is not permitted to use any prebuilt grid systems or frameworks (Bootstrap/Foundation).
- You will be required to write JavaScript to allow for functionality changes between viewports (showing/hiding of content and/or navigation elements). Refer to the PSDs to determine where JavaScript functionality is necessary and implement where necessary.
- Comment your HTML, CSS and JavaScript where necessary.
- Write useful commit messages.
Considerations
Design
Your completed page should match the design as closely as possible. The page should be **completely fluid**, i.e., the page does not break when moving between mobile and desktop breakpoints.
Take into consideration that the PSDs have been designed for retina displays and size your assets accordingly.
Standards Compliance
Ensure that your markup is W3C compliant.
HTML Semantics
Ensure that your markup is semantic.
Accessibility
Ensure that your markup takes into account basic accessibility (WCAG 2.0) standards.
CSS
Related Skills
Hermes Body
Reachy Mini front end for Nous Research's hermes-agent — OpenAI Realtime voice loop + robot motion tools, with
Remotemini
iPhone front-end for Claude Code sessions on a Mac, with a gate-and-control harness (redacted public copy)
Web Development And Online Marketing Skills
Replace boring SaaS with a bunch of skills and have them self-update. Skills for Codex/Hermes etc. that market
Ma Assessment
End-to-end M&A assessment playbook — combines due diligence, financial modeling, competitive analysis, and str
EvoTrace
Compile real-world Claude Code and Codex trajectories into verified, tradable post-training assets.
Sleeper Agents Paper
Contains random samples referenced in the paper "Sleeper Agents: Training Robustly Deceptive LLMs that Persist
Related Agents
Fec Architect
Use this subagent when the task involves page splitting, component architecture, state flow design, catalog pl
Frontend Figma Layout Designer
Specialized front-end layout designer. Use when the user pastes raw HTML and CSS exported from Figma and wants
A11y Role Auditor
ARRM-based accessibility role auditor — reviews artifacts from responsibility-based team role perspectives (vi
