dcode:find-component — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited dcode:find-component (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Find where UI components live in a codebase—from screenshots, routes, or names.
For designers who ask: "I see this button in the app... where's the code?"
The target can be:
/path/to/screenshot.png - Find code from a visualsettings/profile, dashboard/analytics - Find components for a URLUserAvatar, PricingCard - Find definition and usageCheck if input is:
.png, .jpg, .jpeg, .webp → ScreenshotMap routes to likely component locations. Common patterns:
| Framework | Typical Structure |
|---|---|
| Next.js | app/{route}/page.tsx or pages/{route}.tsx |
| React Router | Check route config, often src/pages/ or src/views/ |
| Vue | src/views/ or src/pages/ |
| Angular | src/app/{feature}/ |
Search for route registration:
# Find route definitions
grep -r "path.*['\"]/{route}" --include="*.tsx" --include="*.ts" --include="*.js"Search for the component definition:
# Find component file
grep -r "function ComponentName\|const ComponentName\|class ComponentName" --include="*.tsx" --include="*.jsx" --include="*.vue"Once the main component is found, gather the full picture:
| Type | Pattern | Purpose |
|---|---|---|
| Main component | index.tsx, ComponentName.tsx | Core logic and JSX |
| Styles | *.scss, *.css, *.styled.ts | Visual styling |
| Types | types.ts, *.types.ts | TypeScript definitions |
| Tests | *.test.tsx, *.spec.ts | Test coverage |
| Hooks | use-*.ts, hooks/ | Custom React hooks |
| Sub-components | Child directories | Nested components |
| Stories | *.stories.tsx | Storybook examples |
Present findings clearly:
## Found: {target}
### Main Component
| File | Purpose |
|------|---------|
| `src/components/UserCard/index.tsx` | Main component |
| `src/components/UserCard/styles.scss` | Styling |
### Related Files
| File | Purpose |
|------|---------|
| `src/components/UserCard/Avatar.tsx` | Sub-component |
| `src/hooks/useUserData.ts` | Data fetching |
### Quick Start
- **To modify styling**: Edit `styles.scss`
- **To change behavior**: Edit `index.tsx`
- **To see examples**: Check `*.stories.tsx`After listing files, add helpful guidance:
Input: Screenshot of a pricing card Output: Located PricingCard component, styles, and data source
Input: settings/notifications Output: Files for the notifications settings page
Input: DatePicker Output: Component definition, styles, and usage examples
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.