Workflow: Building a feature with Claude Code

The most effective way to grasp the capabilities of Claude Code is to witness it in practice. In this post, I will guide you through a real-world example: creating a Job Card component for a Next.js application using Tailwind CSS.

The goal

We require a display card for a job board with the following elements:

1. Job title
2. Company name & logo
3. Location & type (Remote/Hybrid)
4. "Apply" button
5. Responsive styling

The prompt

Rather than manually creating the file, importing React, and writing JSX, I simply open my terminal and enter:

bashCopy
claude "Create a 'JobCard' component in 'components/jobs/JobCard.tsx'.
It should accept props for title, company, location, type, and logoUrl.
Use a clean, modern card design with a white background and subtle shadow.
It must be responsive. Use Tailwind CSS.
Make sure the 'Apply' button uses our secondary button style."

The execution

Here is the process Claude Code follows:

1. Research: It scans for tailwind.config.js to identify my color palette. It also checks for existing components to find a reusable "secondary button" style.
2. Plan: It informs me: "I will create the file components/jobs/JobCard.tsx. I will structure it using a flexbox layout that stacks on mobile screens and expands on desktop."
3. Act: It generates the code.

tsxCopy
// Generated by Claude Code (Simplified)
export const JobCard = ({ title, company, location, type, logoUrl }) => {
  return (
    <div className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow p-6 border border-gray-100">
      <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div className="flex items-center gap-4">
          <img
            src={logoUrl}
            alt={company}
            className="w-12 h-12 rounded-lg object-cover"
          />
          <div>
            <h3 className="font-semibold text-lg text-gray-900">{title}</h3>
            <p className="text-sm text-gray-500">
              {company} • {location}
            </p>
          </div>
        </div>
        <div className="flex items-center gap-3 w-full md:w-auto">
          <span className="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-xs font-medium">
            {type}
          </span>
          <button className="w-full md:w-auto px-4 py-2 bg-gray-900 text-white rounded-lg text-sm font-medium">
            Apply Now
          </button>
        </div>
      </div>
    </div>
  );
};

Iteration

Upon reviewing the result, I noticed I missed a detail.

Me: "Add a bookmark icon in the top right corner."

Claude: "Understood. I will import the BookmarkIcon from lucide-react (which is installed) and position it absolutely in the top-right."

It edits the file immediately.

The result

In roughly 3 minutes, I have a fully responsive, styled component.

• Time saved: ~15 minutes of typing and CSS adjustments.
• Cognitive load: Minimal. I focused on what I needed, not on the syntax details.

Conclusion

This demonstrates the power of agentic workflows. You act as the architect of your application. You describe the features, and Claude Code handles the construction.

Start small, trust the tool, and watch your development velocity soar. Happy coding!