Gyschuaner/from-idea-to-personal-site

Search Blog Theme

Goal

Help the user discover a strong visual direction for a personal blog or personal website.

This skill is a theme discovery and taste-shaping skill. It should not build the website, write page code, or over-focus on implementation details. Its job is to propose distinctive directions, verify useful references, and recommend a visual path that can later guide website generation or redesign.

Contract

Inputs:

• User taste preferences, identity, site purpose, audience, and content type.
• Optional references such as URLs, screenshots, v0 templates, Figma links, GitHub themes, or style keywords.
• Constraints such as personal blog, portfolio, research homepage, digital garden, plain static site, or framework preference.

Outputs:

• 3-5 potential theme directions when exploration is needed.
• Verified reference URLs for named templates, websites, repositories, or design examples.
• One recommended direction with visual language, what to borrow, what to avoid, and a clear next-step handoff.

Boundaries:

• Do not build files, edit code, migrate posts, personalize an existing site, validate a generated site, or publish.
• Do not invent specific template names or pretend a conceptual direction is a found reference.
• Do not copy protected template code or assets.

Success gate:

• The user has a specific enough direction to hand to make-personal-site or copy-website-style.
• Named references have URLs.
• The recommendation feels personal and content-suitable, not just a generic style label.

If gate fails:

• Search or inspect additional references.
• Reframe broad labels into more specific personal metaphors.
• Ask one concise preference question if several directions are equally plausible.

Use When

Use this skill when the user:

• Wants to create a personal blog, personal homepage, portfolio, research homepage, or digital garden.
• Wants to find attractive, distinctive, unusual, or personally fitting blog themes.
• Provides v0, Figma, GitHub theme, existing website URL, screenshot, image, or style keywords.
• Describes a style preference such as minimal, academic, playful, pixel-style, developer-focused, magazine-like, dark mode, retro, experimental, calm, dense, editorial, or game-inspired.
• Is unsure which blog style fits their identity and wants recommendations.
• Wants to transfer the feeling of a reference page into their own site without copying it exactly.

Do Not Use When

Do not use this skill when:

• The user has already chosen a theme and only wants implementation.
• The user asks directly to write HTML/CSS/JS pages or modify existing code.
• The user only wants to publish a post, fix deployment, or migrate Markdown content.
• The user asks to copy a commercial template or copyrighted website exactly.

If the user wants implementation, hand off to make-personal-site. If the user wants content migration or post import, hand off to add-blog-posts. If the user wants deployment, hand off to publish-static-site.

Internal Workflow

Treat these steps as internal work. Do not narrate them unless the user explicitly asks how the search was done.

1. Understand the user's identity, site purpose, taste keywords, references, and constraints.
2. First propose 3-5 potential theme directions as concepts, not template names.
3. For each promising direction, search or inspect relevant references from v0, Figma, GitHub, existing websites, or other public sources.
4. Keep only references that can be named with a URL. If a direction has no verified source, label it as a conceptual direction rather than a found template.
5. Compare the directions by distinctiveness, fit, reference quality, content suitability, and risks.
6. Recommend one primary direction, with 1-2 alternates when useful.

Source Verification Rule

When naming a specific template, website, repository, or design reference, include a URL.

Use this distinction:

• Verified reference: a named source with a URL.
• Conceptual direction: an original or inferred idea without a verified source.

Do not invent template names. Do not imply that a template was found if it was only inferred from style keywords.

Distinctive Theme Rule

When the user asks for a distinctive, unique, memorable, or non-generic site, do not stop at broad labels such as "minimal", "terminal", "cyberpunk", "dark mode", or "portfolio".

Make the direction more personal by adding a clear metaphor or world:

• Weak: terminal portfolio.
• Better: an old computer archive for personal research logs and project files.
• Weak: minimal blog.
• Better: a field notebook for experiments, reading notes, and project traces.
• Weak: dark developer site.
• Better: a private operating-system dashboard for writings, builds, and public logs.

The best recommendation should feel like a personal digital place, not just a UI style.

What To Show The User

Use natural prose with light structure. Do not output a rigid Markdown template or a fenced Markdown brief unless the user asks for one.

The response should usually include:

• A short recommendation up front.
• 3-5 potential theme directions when the user is still exploring.
• Verified references with URLs when specific templates or websites are mentioned.
• A plain-language explanation of why the recommended direction fits.
• The visual language: mood, colors, typography feel, layout rhythm, interaction tone, and content presentation.
• What to borrow from references and what not to copy.
• A concise next-step suggestion, such as choosing one direction or handing it to the implementation skill.

Do not show:

• Raw search keywords.
• Internal scoring rubrics.
• Step-by-step process notes.
• Long implementation checklists.
• Detailed CSS tokens or code-level decisions, unless the user asks for implementation planning.

Candidate Theme Families

Use these as inspiration, but adapt them to the user's identity and references.

Minimal Notebook

A clean notebook-style site for technical blogs, study notes, and lightweight personal homepages.

Typical traits:

• Quiet colors and strong typography.
• Few decorative elements.
• Recent writing and selected projects appear quickly.
• Works best when the user's content is thoughtful and text-heavy.

Developer Portfolio

A developer portfolio style for showcasing projects, GitHub work, skills, and technical writing.

Typical traits:

• Clear intro, selected projects, technical tags, and writing entry points.
• Good for users who want hiring, collaboration, or project credibility.
• Can borrow from v0 or shadcn-style layouts without copying their code.

Research Homepage

A restrained academic homepage for researchers, students, paper authors, and lab members.

Typical traits:

• Bio, research interests, publications, projects, and CV are central.
• Clear, credible, and low-noise.
• Reading pages should feel calm and serious.

Digital Garden

A knowledge-garden style for Obsidian notes, long-term learning, and topic indexes.

Typical traits:

• Highlights tags, topics, relationships, and recent updates.
• Home page can feel like a map rather than a chronological blog.
• Good for users with many notes or evolving ideas.

Personal Operating System

A dashboard-like personal site that frames the user's work as files, logs, modules, or system panels.

Typical traits:

• Strong metaphor without becoming a fake terminal gimmick.
• Good for developers, researchers, builders, and experimental creators.
• Can be memorable if the metaphor is tied to the user's real work.

Archive Or Field Notes

A site that feels like an archive, lab notebook, field journal, or personal research cabinet.

Typical traits:

• Excellent for writing-heavy blogs, research notes, project histories, and long-term learning.
• Less flashy than a portfolio, but more personal than a standard blog.
• Works well with dates, tags, annotations, citations, and project traces.

Playful Personal Site

A more expressive site for users who want a memorable digital home.

Typical traits:

• May use pixel details, retro UI, hand-drawn accents, collage, or game-like motifs.
• Home page feels like a personal space rather than a resume.
• Decoration should support personality without harming readability.

Risk Rules

• Do not promise exact Figma-to-code or v0-to-code reproduction.
• Do not copy commercial template code or protected assets.
• Do not let style overpower the user's identity, writing, projects, and content.
• Be honest when a suggested direction is conceptual rather than based on a verified template.
• If the user has no strong preference, recommend a simple, maintainable direction with one memorable twist.

Completion Criteria

After using this skill, the user should have:

• A few meaningful theme directions to choose from.
• Verified references when specific templates or sites are mentioned.
• One recommended direction that feels personal rather than generic.
• Clear advice on what visual language to borrow and what to avoid.
• A natural next step for implementation or further refinement.