Communitygithub.com

ulasalyesil/personal-website-v2

Ship correct, complete metadata.

¿Qué es personal-website-v2?

personal-website-v2 is a Claude Code agent skill that ship correct, complete metadata.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ulasalyesil/personal-website-v2/tree/HEAD/.agents/skills/fixing-metadata

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

fixing-metadata

Ship correct, complete metadata.

how to use

  • /fixing-metadata Apply these constraints to any metadata work in this conversation.

  • /fixing-metadata <file> Review the file against all rules below and report:

    • violations (quote the exact line or snippet)
    • why it matters (one short sentence)
    • a concrete fix (code-level suggestion)

Do not introduce new frameworks or SEO libraries unless explicitly requested. Prefer minimal diffs.

when to apply

Reference these guidelines when:

  • adding or changing page titles, descriptions, canonical, robots
  • implementing Open Graph or Twitter card metadata
  • setting favicons, app icons, manifest, theme-color
  • building shared SEO components or layout metadata defaults
  • adding structured data (JSON-LD)
  • changing locale, alternate languages, or canonical routing
  • shipping new pages, marketing pages, or shareable links

rule categories by priority

prioritycategoryimpact
1correctness and duplicationcritical
2title and descriptionhigh
3canonical and indexinghigh
4social cardshigh
5icons and manifestmedium
6structured datamedium
7locale and alternateslow-medium
8tool boundariescritical

quick reference

1. correctness and duplication (critical)

  • define metadata in one place per page, avoid competing systems
  • do not emit duplicate title, description, canonical, or robots tags
  • metadata must be deterministic, no random or unstable values
  • escape and sanitize any user-generated or dynamic strings
  • every page must have safe defaults for title and description

2. title and description (high)

  • every page must have a title
  • use a consistent title format across the site
  • keep titles short and readable, avoid stuffing
  • shareable or searchable pages should have a meta description
  • descriptions must be plain text, no markdown or quote spam

3. canonical and indexing (high)

  • canonical must point to the preferred URL for the page
  • use noindex only for private, duplicate, or non-public pages
  • robots meta must match actual access intent
  • previews or staging pages should be noindex by default when possible
  • paginated pages must have correct canonical behavior

4. social cards (high)

  • shareable pages must set Open Graph title, description, and image
  • Open Graph and Twitter images must use absolute URLs
  • prefer correct image dimensions and stable aspect ratios
  • og:url must match the canonical URL
  • use a sensible og:type, usually website or article
  • set twitter:card appropriately, summary_large_image by default

5. icons and manifest (medium)

  • include at least one favicon that works across browsers
  • include apple-touch-icon when relevant
  • manifest must be valid and referenced when used
  • set theme-color intentionally to avoid mismatched UI chrome
  • icon paths should be stable and cacheable

6. structured data (medium)

  • do not add JSON-LD unless it clearly maps to real page content
  • JSON-LD must be valid and reflect what is actually rendered
  • do not invent ratings, reviews, prices, or organization details
  • prefer one structured data block per page unless required

7. locale and alternates (low-medium)

  • set the html lang attribute correctly
  • set og:locale when localization exists
  • add hreflang alternates only when pages truly exist
  • localized pages must canonicalize correctly per locale

8. tool boundaries (critical)

  • prefer minimal changes, do not refactor unrelated code
  • do not migrate frameworks or SEO libraries unless requested
  • follow the project’s existing metadata pattern (Next.js metadata API, react-helmet, manual head, etc.)

review guidance

  • fix critical issues first (duplicates, canonical, indexing)
  • ensure title, description, canonical, and og:url agree
  • verify social cards on a real URL, not localhost
  • prefer stable, boring metadata over clever or dynamic
  • keep diffs minimal and scoped to metadata only

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

ulasalyesil/personal-website-v2

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

ulasalyesil/personal-website-v2

Conduct design interviews, generate five distinct UI variations in a temporary design lab, collect feedback, and produce implementation plans. Use when the user wants to explore UI design options, redesign existing components, or create new UI with multiple approaches to compare.

ulasalyesil/personal-website-v2

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.

ulasalyesil/personal-website-v2

Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.

ulasalyesil/personal-website-v2

This skill is for interface design — dashboards, admin panels, apps, tools, and interactive products. NOT for marketing design (landing pages, marketing sites, campaigns).

ulasalyesil/personal-website-v2

Best practices and example-driven guidance for building SwiftUI views and components. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens, or needing component-specific patterns and examples.

ulasalyesil/personal-website-v2

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.

ulasalyesil/personal-website-v2

Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance. Use when auditing websites for accessibility, fixing WCAG violations, or implementing accessible design patterns.

ulasalyesil/personal-website-v2

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

ulasalyesil/personal-website-v2

Enforces an opinionated UI baseline to prevent AI-generated interface slop.

ulasalyesil/personal-website-v2

Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.

ulasalyesil/personal-website-v2

Survey any codebase as a senior advisor and produce prioritized, self-contained implementation plans for OTHER models/agents to execute. Strictly read-only on source code — never implements, fixes, or refactors anything itself. Use when asked to audit a codebase, find improvement opportunities (bugs, security, performance, test coverage, tech debt, migrations, DX), suggest features or where to take the project next (roadmap, product direction), or generate handoff plans for another agent to implement.

ulasalyesil/personal-website-v2

Defines the product's objects, relationships, states, and vocabulary independently of any interface — the most load-bearing layer

ulasalyesil/personal-website-v2

Maps domain concepts, terminology conflicts, and bounded contexts — produces a noun harvest for the conceptual model layer

ulasalyesil/personal-website-v2

Maps interaction structure and flow — produces breadboard notation with edge cases, failure paths, and open decisions

ulasalyesil/personal-website-v2

Framework orientation for Layers of Product Design — load this first; provides the context all other skills depend on

ulasalyesil/personal-website-v2

User research planning and synthesis at the observed behaviour layer — produces candidate job stories with confidence ratings

ulasalyesil/personal-website-v2

Diagnostic audit across all seven layers — identifies the bottleneck layer and recommends where to focus

ulasalyesil/personal-website-v2

Connects user opportunities to business outcomes and solution bets — produces a strategy tree and prioritised experiments

ulasalyesil/personal-website-v2

Audits existing surface against lower-layer decisions and produces a surface decision inventory — vocabulary, object consistency, completeness, feedback, hierarchy, accessibility

Skills relacionados